What's New in CSS2

Xah Lee, 2005-11

This page shows the primary features in CSS2 not in CSS1. If you do not know CSS at all, read this excellent tutorial: http://www.zvon.org/xxl/CSSTutorial/Output/contents.html

Note: there's no way to specify a CSS version number in your HTML markup. Just test with browsers if you must use new features.

Tag Matching

CSS2 provides more powerful ways to associate styles with tags.

• “*” matches any tag. e.g. * {color:red}.

• A “greater than” sign “>” can be used to specify parent-child relationship. e.g. AAA > CCC > DDD {color:red} matches tag DDD whose parent is CCC whose parent is AAA.

• Space can be used to specify that a tag must have other tags as its ancestor. For example: AAA CCC DDD {color:blue} matches DDD that has CCC as its ancestor somewhere, which has AAA in its ancestor somewhere.

• “+” can be used to specify some restriction on same level tags. For example: AAA + BBB {color:red} matchs BBB only if it has a older sibling AAA.

• “:first-child” can be used to match a tag only if it is the first child. e.g. BBB:first-child {color:red} matches only if BBB is a first child.

• The following can be used for the anchor tag and certain other tags:

a:link {color:red}
a:visited {color:green}
a:hover {color:fuchsia}
BBB:hover {color:red}
BBB:active {color:green}
BBB:focus {color:fuchsia}

Matching Tags with specific Attribute, Attribute Value, Attribute Value Field

• A tag with particular attribute can also be specified. Example: BBB[text] {color:blue} This will match BBB tags that have the “text” attribute: “<BBB text="blab">xxx</BBB>”.

• A specific attribute value can also be specified. Example: BBB[text="xyz"] {color:blue} matches “<BBB text="xyz">xxx</BBB>”.

• A specific field in the value (separeted by spaces) in the value can be specified, by using the operator “~=”. Example: BBB[text~="xyz"] {color:blue} matches “<BBB text="abc xyz opq">xxx</BBB>”.

Here's a sample HTML using the above: ex_css_match_tag_attribute.html.

Matching Tag's Content

“:first-letter” and “:first-line” can be used. e.g.

p:first-letter {color:red}
p:first-line {color:blue}

Sample: ex_css_match_tag_content.html.

Here's the full match syntax:

Pattern	Meaning
*	Matches any element.
E	Matches any E element.
E F	Matches any F element that is a descendant of an E element
E > F	Matches any F element that is a (immediate) child of an element E.
E:first-child	Matches element E when E is the first child of its parent.
E:link E:visited E:active E:hover E:focus	Matches links, visited links, or mouse hovers etc..
E:lang(c)	Matches element of type E if it is in (human) language c (the document language specifies how language is determined).
E + F	Matches any F element immediately preceded by an element E. Adjacent selectors
E[foo]	Matches any E element with the “foo” attribute set (whatever the value).
E[foo="warning"]	Matches any E element whose “foo” attribute value is exactly equal to “warning”.
E[foo~="warning"]	Matches any E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to “warning”.
E[lang\|="en"]	Matches any E element whose “lang” attribute has a hyphen-separated list of values beginning (from the left) with “en”.
DIV.warning	HTML only. The same as DIV[class~="warning"].
E#myid	Matches any E element ID equal to “myid”.

The above table is based on: http://www.w3.org/TR/REC-CSS2/selector.html

Layout, Layers, Tabular Format, and Text Flow

A very important feature in CSS2 is the ability to do layout and with layers.

Layout and Layers

Layout is to specify the position of each item, in a absolute coordinate or relative to its parent. In HTML, It is often done in practice by using Table tag with width attribute.

In CSS2, layout are done with attributes “display” and “position”. The value fo “position” can be “absolute” or “relative”. There's also attributes “top”, “bottom”, “left”, “right”, and each's value is a length unit. Example:

AAA {display:block;}
BBB {display:block; position:absolute; top:300px, left:50px}
CCC {display:block; position:relative; left:100px}

Examples: CSS Layout and Layers

Example: Fixed Widget with Cascading Style Sheet

CSS2 allows one to specify which element should be displayed on top of another (hiding the one behind). This is done with the “z-index” attribute. The parameter for z-index are integers. The larger the integer, the more front it is.

BBB {display:block; position:absolute; top:300px; z-index:50}
CCC {display:block; position:absolute; top:300px; z-index:2}

Another useful directive is the “visibility” attribute. It can be set to “visible” or “hidden”, giving more control of CSS2's layout capabilities. This can be used in conjunction with JavaScript to fruitful effects. For example, if you have tabs on a page, clicking a tab can automatically make the main area content associated with that tab visible, while make all content associated with other tabs hidden.

The CSS2's layering and layout feature is used to implement pop-up tooltips.

Tabular Format

• CSS2 has the ability to specify a table format. This in conjunction with “position” and “z-index” can achieve may web-design effects. For example:

* {border: solid}
AAA {display: table}
BBB {display: table-row}
CCC {display: table-cell}
DDD {display: table-cell}

will render the following XML code:

<AAA>
  <BBB>
    <CCC>ccc1</CCC>
    <DDD>ddd1</DDD>
  </BBB>
  <BBB>
    <CCC>ccc2</CCC>
    <DDD>ddd2</DDD>
  </BBB>
  <BBB>
    <CCC>ccc3</CCC>
    <DDD>ddd3</DDD>
  </BBB>
</AAA>

like a table as in HTML:

<table border="1">
  <tr>
   <td>ccc1</td>
   <td>ddd1</td>
  </tr>
  <tr>
    <td>ccc2</td>
    <td>ddd2</td>
  </tr>
  <tr>
    <td>ccc3</td>
    <td>ddd3</td>
  </tr>
<table>

See a example here: Tabular Formatting with CSS2

• white-space has a new behavior spec: nowrap. e.g.

BBB {white-space: normal}
CCC { white-space: pre }
DDD { white-space: nowrap }

Example: CSS Text Wrapping.

Changing Content

Text can be inserted at the beginning or end of specified tag, using “:before” and “:after”. e.g.

AA:before {content:'Proof: '}
AA:after {content:'End of Proof.'}

for element such as:

<AA>because 1+1 is 2, therefore I win.</AA>

will become

<AA>Proof: because 1+1 is 2, therefore I win. End of Proof.</AA>

Example: css_before_after.html

Color, Background image, Tex decoration, Font

• CSS2 supports color names of Browser's GUI. For Example:

A {color:AppWorkspace}
B {color:ButtonFace}
C {color: ButtonHighlight}
D {color:ButtonText}
E {color:CaptionText}
F {color:Highlight}
G {color:HighlightText}

Example: CSS2's System Colors

• Several features are new in CSS2 for background image. It can be repeated, or just horizontally or vertically. It can also be fixed, so that scrolling doesn't move it. Example:

AAA {background-image:url("some.gif")}
AAA {background-repeat:repeat-x}
AAA {background-position: top}
AAA {background-attachment: fixed}

• A new tag text-shadow can have size and color.

BBB {text-shadow: 5px 12px red}

• Font can now be specified based on Browser's setup. e.g.

AAA {font:caption}
BBB {font:small-caption}
CCC {font:status-bar}

• Mouse Pointer or Cursor's shape can be specified. e.g.

AAA {cursor: crosshair}
BBB {cursor: pointer}
CCC {cursor: move}
DDD {cursor: e-resize}
EEE {cursor: text}
FFF {cursor: wait}
help {cursor: help}
uri {cursor: url(".../pointer.gif")}

Reference: http://msdn2.microsoft.com/en-us/library/ms533050.aspx

∑ Back to DHTML Tutorial.

2005-11