CSS1 and CSS2 Differences
This page shows the primary features in CSS2 not in CSS1.
- CSS1 is published in 1996.
- CSS2 is published in 1998.
- As of today (2005-11-30), all major browsers supports practically 99.9% of CSS2.
- CSS3 is in works but not out yet.
If you are not familiar with CSS, see: CSS: Basics. If you know the basics and want a practical examples of CSS tag matching supported by all current versions of browsers, see: CSS Tag Matching (Selector) Syntax.
Note: there is 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.
/* make everything red */ * {color:red}
>
means parent-child relationship.
/* p inside div of class header inside body */ body > div.header > p {color:red}
Space can be used to specify that a tag must have other tags as its ancestor.
/* make any linked img inside table without border */ table a img {border:none}
+
can be used to specify some restriction on sibling tags.
/* if p comes immediately after img, make the text red */ img + p {color:red}
Pseudo-class: link, hovering, focus, first child…
There are special syntax to match some mouse hovering, focusing, behaviors. (these :xxx
forms are called pseudo-class.)
a:link {color:red} a:visited {color:green} a:hover {color:yellow} div.myButtonX:hover {color:red} div.myButtonX:active {color:green} div.myButtonX:focus {color:yellow}
:first-child
can be used to match a tag only if it is the first child.
/* make first line of list red */ li:first-child {color:red}
:first-letter
and :first-line
can be used. example
p:first-letter {color:red} p:first-line {color:blue}
Matching Tags with Attributes
Existance of a Attribute
You can match the existence of a attribute, by the syntax tagName[attributeName]
.
/* if a link has a “title” attribute, render the link red */ a[title] {color:red}
Matching Attribute Values
You can match a tag's attribute's value, using the syntax tagName[attributeName="valueString"]
.
/* if a image's alt attribute is “icon”, set a red border */ img[alt="icon"] {border:solid thin red}
Matching a Word in the Attribute's Value
A word in the value of a attribute can be matched, by using the operator ~=
.
/* if a image's alt text has the word “house” in it, set a red border */ img[alt~="house"] {border:solid thin red}
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 Tutorial .
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. Example:
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
. example
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. example
AAA {font:caption} BBB {font:small-caption} CCC {font:status-bar}
Mouse Pointer or Cursor's shape can be specified. example
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")}