|
|||||||||||
|
Because CSS provides so many ways of applying style to pages, it is inevitable that declarations will conflict. To resolve this, there is something known as a cascade.
So that style sheets are as short as possible, many styles inherit. This means that if the value for an inherited property has not been specified, the parent's value (which might in turn have been inherited) is used. Thus if you specify BODY {color: black} then everything inside BODY will inherit that color unless a contrary declaration is made.
It is stated in this tutorial whether a property inherits, although generally it is a common sense matter and can usually be guessed.
There are dangers in relying on inheritance - it should not be assumed that supplying a style that is inherited to BODY will automatically give all elements that style. For example, if an element is inside X, which is also inside BODY, the styles that are applied to X override BODY's values, and so the element inherits X's styles over BODY's.
It is important to note that percentages do not inherit, but the calculated value does - e.g., if font-size: 50% results in a font size of 8px, 8px will be inherited, not 50%.
For example, given:
<HEAD>
<STYLE type="text/css">
<!--
BODY {color: red}
-->
</STYLE>
<BODY>
<P>
the P element would be red because color inherits, and so in the absence of a declaration on the P element, the inherited value is used.
The cascade dictates the values that an element should have.
Since more than one style rule can apply to an element, then a means of resolving conflicts is needed. The cascade (below) fufils this position.
If, on the other hand, no declaration applies to an element, and the property is inherited, the inherited value is used. Otherwise, the initial value is used.
Thus if on a P element no declaration had been made for 'color' or 'height', then since 'color' is an inherited property, the value for 'color' for the P's parent would be used; on 'height', since 'height' is not an inherited property (as you could probably guess), the initial value, 'auto' is used'.
There are three possible sources of style: the author, the user (via a user style sheet), and the browser (via the browser's style rules).
If an element has more than one value specified for one of its property, there is a sort by origin. Properties specified for a element by the author override those specified by the user, which override those specified by the browser.
It should be noted that where the user style sheet states a value for an element for a property that the author assumes will be inherited, unexpected results may occur.
Thus:
Browser style sheet:
BODY {color: black;
font-size: 16px;
background: white}
User style sheet:
BODY {color: white;
background: black}
Author style sheet:
BODY {background: white}
In this example, the result would be a white foreground color because the user style sheet overrides the browser style sheet, and in the absence of a author declaration that will be used. The background will also be white because that is the color specified by the author, which overrides all declarations by the browser and user. This demonstrates why it is important to always specify a background color with the foreground color.
Finally, the font size would be 16 pixels because that is what the browser specifies and neither the user nor author contradict it.
The weight sort sorts declarations according to their weight. Declarations can have normal weight or important weight. Declarations are made important by the addition of !important (or ! important). For example, color: red !important.
The effect of the weight sort is twofold:
P {font-size: 399px !important} P {font-size: 16px}
399 px will result because that declaration has greater weight.
If there are still conflicting values for a given property of an element, the specificity sort prevails.
This is done thus: count the number of ids in the selector (a), count the number of classes and pseudo-classes (b), count the number of elements and pseudo-elements (c).
Make this into a number ABC - e.g. BODY P#hello:active:first-letter, has a=1, b=1,
c=3 = 113.
The highest number wins.
HTML formatting attributes (e.g. align on <H1 align="center">)
have a specificity of 1, and are assumed to be the start of the author style sheet. This does not
apply to formatting tags (such as FONT), but only to attributes of elements.
Style specified via the style attribute has infinite specificity.
Note that pseudo-elements apply as if there was a <SPAN class="first-letter"> and <DIV class="first-line"> tag inserted into the HTML, and thus SPAN.first-letter inherits from P, and thus though P#x may have greater specificity than P:first-letter, the P#x does not actually apply directly to the first-letter, although normally it would inherit it.
P.copyright {font-size: .8em}
P {font-size: 1em}
This demonstrates how the cascade basically does what you would expect - the copyright message is given the small text because it has greater specificity.
If styles have the same weight, origin and specificity, those specified at the beginning of the style sheet take precedence over those at the start. Inline style is assumed to be read after embedded style, which is read after linked style. Imported style sheets form the start of the importer's style sheet.
Thus:
P {color: red}
P {color: green}
would result in green, much as you would expect.
All CSS is case insensitive.
To specify that you don't want something to be treated as part of the style sheet, you enclose it in /* */. Comments are valid anywhere between tokens, and thus P {color: red /* comment */} is valid, but P {background: url(/* comment */ green.gif)} is not (since url() is a single token).
P {color: red} /* This is a comment */
In theory, this is done using a \ followed by the
Unicode hexadecimal code for the letter, e.g., \3BA. The \ can
also be used to remove the normal meaning from a character -
e.g., \" inside a string indicates that you don't want to close
the string. In practice, no browser except Netscape 5 supports this so you should ignore CSS escapes.
These are used to state the location of, for example, a background image or list picture.
They follow this syntax: url(filename.filetype), e.g.
url(background.jpg) or url(http://www.background.com/back.jpg).
The file can optionally be enclosed in quotes - e.g. url("back.jpg").
Internet Explorer 3 will ignore URLs enclosed in quote marks. Netscape interprets URLs as relative to the HTML file, not to the style sheet. IE 3 does not support absolute urls (e.g., http://www.foo.com/foobar).
| Name | Meaning | Example |
|---|---|---|
| px | A dot on the computer screen. Most screens have 800 pixels horizontally and 600 vertically. | 7px |
| em | One em is equal to the font size of the element, except when applied to font-size,
when it is equal to the font size of the parent element. |
-4em |
| ex | One ex is the x-height of a font. The x-height is usually about half the font-size, but in script fonts it can be as little as a quarter of it. Generally, browsers take 1ex to be half of the font-size, regardless of the font being used. | 7ex |
| % | A percentage of something | 45.87% |
| Name | Meaning | Example |
|---|---|---|
| in | Inch | 7in |
| pt | a point is 1/72 inches | -5pt |
| pc | 12 points | 1.3pc |
| mm | A millimeter | 6.12mm |
| cm | A centimeter | 6.237cm |
Lengths are used thus: P {font-size: 16px}.
You should avoid using absolute lengths, because the way they are rendered varies between browsers.
You should note that font-size: 7 in (or any similar declaration) is invalid, because there is a space between the number and the measurement.
Internet Explorer 3.* treats ems as points, meaning that using them on your page on font-size or line-height will make your page unreadable and will result in unexpected appearance otherwise. It treats exes as points, meaning that using them will make your page unreadable.
A descendant is simply an HTML element that is inside another HTML element. Thus every element is a descendant of the <HTML> element, and in the example below, OL and LI are both descendants of BODY. Equally, BODY is the ancestor of both OL and LI.
<BODY>
<OL>
<LI>
Some list text
</LI>
</OL>
</BODY>
A block element is one that causes a new line, such as <P>.
An inline element is one that does not, such as <EM>.
A replaced element is one such as <IMG>, where the content of the element is replaced by something else (e.g., an image).
The next section considers the important points about properties and shorthands, etc.
Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.