|
||||||||||
|
Basic concepts |
||||||||||
|
||||||||||
|
Advanced concepts |
||||||||||
|
This section covers things that could have been included in any of the early sections: attaching or applying styles or key concepts, but weren't felt useful enough or supported by enough browsers to be included.
You specify media-dependent style sheets with the addition of the media attribute
to the LINK or STYLE element. For example, <STYLE media="screen"
type="text/css">.
You may specify a list of media that a style sheet applies to by separating them by commas, as
in media="screen, braille". There follows a complete list of valid media (note that
these must be in the lowercase):
This applies the rules in the block to the specified medium:
@media print {
BODY {margin-left: .2in}
P {margin-left: .2in}
}
@media may not contain @import rules inside it.
To designate a style sheet as applying to one or more media, you can follow the @import statement by a comma separated list of media.
@import url(filename.css) print, projection;
This example would apply the specified styles when the document is viewed on a printer or projector.
Whereas the following would only apply when the document was printed:
@import url(filename.css) print;
Although most browsers support normal @import statements, fewer support media-dependent ones.
In order to provide more choice to viewers of pages, you can use alternate style sheets. These allow users to select between different styles. Thus there are three types of style sheet:
Persistent style sheets are specified thus (i.e., in the same way as described above):
<LINK rel="stylesheet" href="nameoffile.css" type="text/css">
You should only have one preferred style sheet per page.
Preferred style sheets are declared in the same way as persistent style sheets, except they
include a title:
<LINK rel="stylesheet" title="nameOfStyleScheme" href="nameoffile.css" type="text/css">
<LINK rel="alternate stylesheet" title="nameOfStyleScheme" href="nameoffile.css" type="text/css">
Note that because only about 1% of current browsers support alternate style sheets, I recommend that you use RichInStyle.com's MySite script, since it provides equivalent functionality but is superior in that:
*The universal selector matches anything. Thus BODY * P, means P is the grandchild or greater of BODY, and *:active is equivalent to :active. Its main use is in X * Y (or similar statement) to state that Y must be at least X's grandchild, or to assign a style to all elements
The universal selector is omissible when it is not the only component of a simple selector (e.g., *.class is the same as .class, but ' ' is not the same as '*').
For example to specify that all elements should be 100 pixels high, you would type:
* {height: 100px}
Note that because of inheritance, discussed later on, and the fact that most browsers do not support the universal selector, you should rarely, if ever, use the universal selector.
This pseudo-class matches a element that is the first child of its parent:
:first-child {color: red} - matches any element that is a first-child, as does
*:first-child. For example, in:
<OL>
<LI>
This is the first child of OL - it is matched by LI:first-child.
<LI>
This is the second child of OL.
</OL>
The difference between these and pseudo-classes is that these select part of an element all of the time, whereas they select all of the element some of the time.
P:first-line {text-transform: capitalize}
P:first-letter {font-size: 48px;
color: red}
These apply to the first line and first letter of an element respectively. Thus the first example would capitalize the first line of P elements, while the other would make the first letter of P elements 48 pixels high and red.
Note that the first-letter is 'inside' the first-line, and so therefore where there are conflicting properties, first-letter's take precedence.
First-line and first-letter apply only to block elements, and are only valid on the subject of the selector (i.e., the element that is being selected - DIV P:first-letter is valid, but P:first-letter SPAN is not).
Only the text-shadow, color, background, and font properties, as well as word-spacing, letter-spacing, text-decoration, text-transform, line-height and clear properties may be applied to :first-line.
Only the text-shadow, color, background, and font properties, as well as text-decoration, vertical-align (provided float: none), text-transform, line-height, margin, border, padding, float and clear properties may be applied to :first-letter.
If the first letter is a quote mark, then first-letter applies to the both the quote and the second letter, and if it is any other non-alphanumeric character, it does not apply at all.
IE 3 applies both first-line and first-letter to the entire element; Opera and Netscape 6 are the only browsers that support them.
IDs are identical to classes except there can only be one element with a given ID in a document. Like classes they should be in lowercase, may not start with a number and may not contain spaces.
They are marked in the HTML in the same way, except they use id instead of class. For example:
<BODY id="introduction">
They are marked in the style sheet with a #. E.g.:
BODY#introduction {font-size: 1.2em}
Or:
#introduction {font-size: 1.2em}
P[attribute] matches P with the attribute set to any value. E.g., P[title] matches <P title="anything">. Note that [title] is also valid since the universal selector is implied where it is omitted.
Although attribute selectors are very useful (for example, you might want to say that all text boxes should have a red background, which you could do by specifying INPUT[type=text], only Netscape 6/Mozilla 5 supports them.
P[title=intro] or P[title="intro"] (the quotes are optional) matches P with its title attribute set to "intro".
P[class~=green] matches P with a class set to "green small", "small green", "green", etc.
>)These differ from ordinary contextual selectors (such as DIV.contents A) insofar as these only apply to children - BODY > P matches:
<BODY>
<P>
but not
<BODY>
<DIV>
<P>
</DIV>
BODY P matches both of them.
These aren't supported by most browsers, and aren't nearly as useful as descendant combinators.
Of the elements below, only the third P element is matched by P + P:
<DIV>
<P>
</P>
</DIV>
<P>
...
</P>
<P>
...
</P>
Thus the adjacent sibling combinator is used to specify that the two specified elements are adajcent siblings. The most common use for them is to specify the typical formatting of a printed book:
P {text-indent: 3%}
H1 + P, H2 + P, H3 + P, H4 + P, H5 + P, H6 + P {text-indent: 0}
This would specify that P elements should be indented by 3%, except after headings where they should not be indented.
The adjacent sibling combinator is only supported by Netscape 6 and Opera.
All properties can be set to have a value of inherit,
regardless of whether the property normally inherits. For example: margin-left:
inherit will cause margin-left to be the parent's value. Note that margin: 10px inherit is
not valid - the whole property must be inherited.
Netscape 4 does not support inherit, but always renders color: (or background-color) inherit as #00e000. Most browsers do not support inherit.
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. This was discussed earlier, but not in full detail.
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 (pixels) 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, attribute selectors and pseudo-classes (b), count the number of elements and pseudo-elements (c).
Universal selectors have a specificity of 0.
Make this into a number ABC - e.g. BODY P[align]#hello:active:first-letter, has
a=1, b=2, c=3 = 123.
The highest number wins.
HTML formatting attributes (e.g. align on <H1 align="center">)
have a specificity of 0, and are assumed to be at the start of the author style sheet. This does not
apply to formatting elements (such as FONT), but only to attributes of elements.
Style specified via the style attribute (e.g., <P style="color: red">) has specificity of 100.
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 the properties specified on it would inherit into 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 smaller text because it has greater specificity.
As mentioned earlier, rules at the end 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.
In theory, you may use escapes by typing 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, and \
means that the new line is purely for esthetic reasons. In practice no browser except Netscape 6 supports
this so you should ignore CSS escapes.
The next section considers the important points about boxes, how their dimensions are calculated, etc.
Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.