CSS 2.0 Properties - Advanced concepts

CSS2 Properties - Advanced concepts

A D V E R T I S E M E N T

---

Introduction

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.

---

Attaching styles

Media-dependent style sheets

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):

1. screen = standard computer screen
2. tty = fixed-pitch character grid, as with teletypes
3. tv
4. projection
5. handheld = handheld device - probably small low-res screen
6. braille
7. aural
8. all = applies to all media

@media

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.

Media-dependent @import statements

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.

Advanced topic: Alternate, preferred and persistent style sheets

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:

1. Persistent style sheets - these persist regardless of users' selections. These cannot be deselected by the user without disabling style altogether, and as such should contain styles that are essential to your page. They help reduce redundancy if coupled with preferred and alternate style sheets, since without them the same styles must go in preferred and alternate style sheets.

   Persistent style sheets are specified thus (i.e., in the same way as described above):

   <LINK rel="stylesheet" href="nameoffile.css" type="text/css">

2. Preferred style sheets - the preferred style sheet is the default style sheet. If an alternate style sheet is selected, the preferred style sheet will no longer apply.

   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">

3. Alternate style sheets - these are not displayed unless selected by the user. They differ from ordinary style sheets in that they have an "alternate stylesheet" value for their rel attribute. They must have a title so that the user can select them:

   <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, since it provides equivalent functionality but is superior in that:

1. It remembers the user's preferred style sheet - they don't have to select their preference each time.
2. It is supported by the overwhelming majority of web browsers.
3. It allows them to create custom style schemes with fine control over everything from fonts to margins.

---

 

Applying styles

Selectors

The universal selector *

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.

:First-child 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>

Pseudo-element selectors

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.

First-line and first-letter

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.

ID selectors

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}

Attribute selector

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.

Attribute set to "x" selector

P[title=intro] or P[title="intro"] (the quotes are optional) matches P with its title attribute set to "intro".

At least one of attribute list set to x selector

P[class~=green] matches P with a class set to "green small", "small green", "green", etc.

Combinators

Child combinators (>)

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.

Adjacent sibling (+) combinator

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.

---

Key concepts

inherit

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.

The cascade

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.

Conflict resolution

The origin sort

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

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:

1. Firstly to give that declaration greater weight than all others in its style sheet. For example, given:

   P {font-size: 399px !important} P {font-size: 16px}

   399 px (pixels) will result because that declaration has greater weight.

2. Secondly to alter the origin sort - user style declarations that are !important override author ones, even if the author ones are also !important.

The specificity sort

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.

The order sort

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.

Escapes

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.