Tech Info - W3C CSS2 OnePage Guide

This page extracts some of the more interesting (IOHO) parts of the CSS2 spec. It describes the selectors and pseudo classes and the CSS measurement units. A series of examples are used to illustrate the use of selectors (the key to the power of CSS). The W3C CSS2 specification sections are individually referenced. For convenience a list of the CSS2 property short forms is provided and some of our experiments, workarounds and CSS 'wheezes'.

This is not a tutorial on CSS - there are many far better qualified to do this. See the side-bar and our links section under 'web resources' -> 'css'.

Note: We use only lower case HTML tags below whereas much W3C documentation uses UPPER case tags. Our reasoning is that if you are going to move to XHTML, case sensitivity is applied and all HTML tags must be lower case so what's the point in writing UPPER case tags - in fact we don't undertand why W3C persist with UPPER case tags. Finally we use the term tag and element to mean the same thing. The reason - HTML uses the term TAG and the DOM calls them elements.

<warning> We got an email saying that while this page is useful we forgot to mention that most selectors will not work with anything except anchor (<a>) tags in MSIE 5/6. Remember the rule - if it looks useful it probably doesn't work in MSIE prior to version 7. Even give this limitation you can do quite useful things - including IE CSS menus. </warning>

Syntax Rules

We use the term rules below since we cannot think of a better one. But this should not be confused with a CSS 'Rule' which is the term used to define a single block-level statement.

CSS keywords are case-insensitive BUT since class names appear inside the HTML/XHTML/XML body they are case-sensitive. Watch this one.
Comments within a CSS style sheet use C style i.e /* ... comment... */
HTML style comments  are ONLY permitted to escape style sheets for older browsers. If they appear inside a style sheet they can cause missing definitions and other trivial problems.
Browsers should ignore invalid or illegal or unsupported values but should continue from the next definition.

Units and Measures

Relative Units
- em relative to the current font-size.
- ex relative to the fonts lowercase x (normally)
- px relative to the viewing area (and we thought this was absolute)
Absolute Units:
- in inch = 2.54cm
- cm centimeter
- mm millimeter
- pt Point 1 point = 1/72 inch
- pc Pica 1 pica = 12 points

Basic Selector Definitions

All the basic types are actually examples of selectors. CSS2 defines a range of selectors which are well worth memorising. We have separately defined the basic types and Pseudo classes since we find it less confusing. The list below is NOT EXHAUSTIVE the W3C documnentation is definitive naturally! There are some examples to illustrate use of selectors.

Format	Selector Name	Description
x	Type	Applies the defined style to any element or tag, for example, 'a {...}' applies the style to all anchor tags.
.y	Class	Applies the class style y to any element which has an attribute of 'class="y", for example, .mystyle which is actually a short version of .mystyle where '' is the universal selector.
x.y	Class	Applies the class style y to any element x which has 'class="y". The rules say anywhere you can use a tag name you can use a class selector, for example, p.myclass applies the style to any paragraph with a 'class="mystyle"' attribute. Note: The 'class=' attribute can take a list of styles separated by a space,for example, 'class="button popup"' will apply both the 'button' and 'popup' styles.
x y	Descendant	Applies the style to any element y which is contained within, or is a descendant of, the element x, for example, 'div a {...}' applies to all anchor tags which are defined inside a div tag. This can get very complicated, for instance, 'div td p' applies the style to a paragraph which is inside a table cell which is inside a div or even div.mystyle td p which further subsets the style only to divs with class="mystyle".
x > y	Child	Applies the style to any element y which is a child of x, for example, 'div > a {...}' applies to anchor tags which are defined inside a div tag but would exclude anchor tags inside a div which were enclosed in a p tag (the p tag is the child not the anchor). MSIE 6.x does not like this selector (read - does not work).
x[y] x[y=z] x[y~=y] x[y\|=y]	Attribute	Applies the style to any element x which has the attribute y, for example, a[href] will apply the style to anchors with an 'href' attribute but not a 'name' attribute. The y=z form allows the style to be selectively applied to an attribute with a value e.g. p[lang="fr"] will apply the style to any paragraph which has a lang="fr" attribute (must match exactly). The y~=z form allows the style to be selectively applied to an attribute where one of the 'space separated' values match exactly. The y\|=z form allows the style to be selectively applied to an attribute where the attribute's value starts with 'z' e.g. h1[lang\|="en"] will find a language attribute of 'en', 'en-CA' and 'en-AU' etc.
x:y	Pseudo Class	Applies the pseudo class y to the element x.
x#y	Id	Applies the class style to any element which has an id="y" attribute. You can also write this as just '#y'. Since all 'id's must be unique in a document, at first glance it appears pretty senseless to have the 'x' (element) part but when using a single style sheet across multiple pages it can stop inadvertent errors e.g td#mine will only apply to a table cell with 'id="mine"' and not a paragraph with 'id="mine"'.
*	Universal	The Universal selector selects any tag or element type and may be omitted in simple selectors, thus .one and .one are equivalent - both apply the style to any element which has a class="one" attribute. The Universal selector is most commonly used to give scope to a definition thus .one {...} will apply the style to any element appearing within the block in which a class="one" attribute appears.
,	Group	Any number of identical defintions may be grouped by using a comma to separate them, thus if .one and p share the same definition then they can written in a single definition as .one, p {...}

There are some examples to illustrate use of selectors.

Pseudo-Classes

More correctly part of the selector set above but we have decided to document them separately.

Format	Class Name	Description
x:first-child	First child	Applies the style to the first child of the specified tag element 'x' e.g. p:first-child matches ALL paragraphs that are the first child of any other element (tag). td >p:first-child limits this to a paragraph which is the first child of a table cell.
a:link	Link Unvisited	Applies the style to any unvisited link. CSS2 defines this rule generically but normally applies only to a (anchor) elements or tags. You can subset this rule by the following a.onsite:link which apply only to a anchor defined as <a href='' class="onsite">. The dot applies to the class style defined.
a:visited	Link Visited	Applies the style to any visited link. CSS2 defines this rule generically but normally applies only to 'a' (anchor) elements or tags. You can subset this rule by the following a.onsite:link which apply only to a anchor defined as <a href='' class="onsite">. The dot applies to the class style defined.
x:hover	Hover Class	Applies the style to any element when the mouse is placed over it e.g. td:hover will perform the action when you hover over a table cell, classically used for anchor elements. You can subset this rule by the following td.mine:hover which apply only to a anchor defined as <td class="mine"></td>. The dot applies to the class style defined.
x:active	Active Class	Applies the style to any element when it is activated e.g. a mouse click e.g. a:hover will perform the action when you click the link, classically used for anchor elements. You can subset this rule by the following a.mine:active which apply only to a anchor defined as <td class="mine"></td>. The dot applies to the class style defined.
x:focus	Focus Class	Applies the style to any element when it has focus for say typing text e.g. input:focus will perform the action when you move the cursor to an input field over a table cell. You can subset this rule by the following input.mandatory:focus which apply only to a input tag defined as <input class="mandatory">. The dot applies to the class style defined.

Index of all CSS properties

This is the W3C index page for all the CSS2 properties.

The Box Model

Understanding the Box Model , and then how the various browsers implement it (read 'screw it up'), is your key to CSS2.

Visual Formatting Model

The Visual Formatting Model discusses absolute, fixed, static and relative positioning and float attributes.

Content, Counting and Lists

Content, Counting and Lists covers quotations, external sources, automatic counters and list formatting.

Paged Media

New in CSS2 Paged Media allows control over screen and print media among others.

Colors and Backgrounds

Colors and Backgrounds defines color formats and a slew of background options.

Tables

Updated in CSS2 Tables allows greater control over table formatting.

User Interface

Updated substantially in CSS2 User Interface allows cursor definitions, dynamic outlines (a kind of border plus for surrounding buttons, images etc.) and magnification (which is NOT supported by CSS and this section just confirms it).

Text

CSS2 Text now includes a 'text-shadow' property.

Aural Style Sheets

New in CSS2 Aural Style Sheets allow noisy web sites.

CSS2 Selector Examples

This section shows a number of worked CSS selector examples against the target HTML page below (we have added the line numbers to make it easier to reference and stripped it to the bare minimum). We then show a number of selectors (which would appear in your style sheet) and describe which lines they affect and under what conditions to illustrate the techniques that can be applied with CSS2. Since the purpose of these examples is to illustrate selectors the actual style properties are not important and are simply shown as {..}. For your edification and delight here is the W3C CSS2 properties list.

Target HTML Page

[1]<html><head><title>Example Target Page</tile>
[2]<style type="text/css">
[3]<!--
[4]/* your style sheet goes here */
[5]-->
[6]</style>
[7]</head>
[8]<body>
[9]<h1><a name="here">A header</a></h1>
[10]<p>Stuff and text.</p>
[11]<table cellspacing="8" class="txt">
[12]<tr>
[13]<td width="120"><a href="a.html" class="two">column one</a></td>
[14]<td>columns two</td>
[15]</tr>
[16]</table>
[17]<div class="three">
[18]<p>
[19]<a href="http://a.com" class="one two">link one</a><br />
[20]</p>
[21]<h1 class="two">Another header</h1>
[22]<ul class="list">
[23]<li class="le" id="four">
[24]<a class="btn" href="c.htm"><span>CSS</span> Layout</a></li>
[25]<li class="btn">another line</li>
[26]</ul>
[27]</div>
[28]</body></html>

CSS Selectors

h1 {..}	Type selector. Applies the style to all occurrences of the 'h1' tag on this page.
a[href] {..}	Attribute selector. Applies the style to the 'a' tags on lines 13, 19 and 24 BUT NOT line 9.
td[width="120"] {..}	Attribute selector. Applies the style to the 'td' tag on lines 13 BUT NOT line 14.
.two {..}	Class selector. Applies the style to lines 13, 19 and 21. If the previous h1 {..} style is also present line 21 has both styles applied which may be what you want!
td:hover {..}	Pseudo selector. Applies the style to lines 13 and 14 when the mouse is hovered over it. This does NOT work for MSIE but does for Opera 7.x and Gecko.
.btn a:hover {..}	Pseudo & Class selectors. Applies the style to line 24 when the mouse is hovered over it. This works for all browsers.
div.three #four {..}	Type, Class & Id selectors. Applies the style to line 23 (and 24) but ONLY if it is enclosed in a 'div' which has a style of 'three'. This might look artificial but we actually use it to conditionally generate buttons on a page.

Problems, comments, suggestions, corrections (including broken links) or something to add? Please take the time from a busy life to 'mail us' (at top of screen), the webmaster (below) or info-support at zytrax. You will have a warm inner glow for the rest of the day.