Tech Stuff - W3C CSS 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. It is simply our CSS cheat sheet. See the side-bar and our links section under 'web resources' -> 'css'.

Note: 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.

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.

1. CSS keywords are case-insensitive BUT since class names appear inside the HTML/XHTML/XML body they are case-sensitive. Watch this one.
2. Comments within a CSS style sheet use C style i.e /* ... comment... */
3. 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.
4. 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

CSS Style Naming

As soon as you start using CSS the first problem is that you very quickly forget your style names or you get name clashes on anything but a trivial stylesheet. Here are our current thoughts, for what they are worth, for a class naming convention.

Some folks use english words to describe each style. We are two fingered typists with a unix background. All lowercase and short is good. We started by trying to codify the styles with three value names (each of one or two charaters) of format x-y-z, thus g-c-s defined a style which was generic (system wide), code (for code snippets), small font (80% or approx 9 - 10pt) and we'd have another one, almost exactky the same, g-c-n (n = font-size:100% or approx 12pt) etc.. The style definitions could be quite lengthy, each one very specific. It kinda worked and we still use the format, however, like many such attempts it quickly broke down. However, we missed a trick. HTML class definitions can contain more than 1 CSS class, for example, <p class="one two three"></p>. We are slowly migrating to a system using a smaller number of basic styles (x-y-z format) and lots of qualifier styles like w-150 set a fixed size of 150px, t-c aligns text to the center, t-i, sets italic, c-b sets color blue, bc-r sets backround-color to red etc.. By stacking up the definitions we can quickly customize any basic style. Thus, <p class="m-b-r c-w bc-b t-s w-120"></p> takes our basic menu box style for right hand menus, changes the color to white, the background to blue, the font-size to 80% and fixes the width at 120px. Previously we would have had 5 separate chunky class definitions and if we changed one value we'd add another definition. Early days but it seems to be more modular.

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.

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.

CSS Short Forms

We two fingered typist like short. This describes the shortest way we can find for CSS definitions, saves all that 'border-left-width' stuff if you don't need it.

Short Forms

Notes:

1. When you use an entry of 0 you can drop the unit of measure since zero is zero - right?.

2. We show the unit 'px' throughout just for consistency.

3. Items inside [ ] describe the scope and MUST NOT BE INCLUDED in the CSS definition. Values may be ALL - guess, V - left and right Vertical sides. H - top and bottom Horizontals. B - bottom, T - Top, L - Left R - right.

4. CSS allows 1, 2, 3 and 4 values to be defined. Three values is a little confusing - well to us it is! But it does save some typing.

(normal | italic |oblique)

(normal | small-caps)

(normal | bold | bolder | lighter | 100 | 200
| 300 | 400 | 500 | 600 | 700 | 800 | 900)

absolute - xx-small, x-small, small, medium,
          large, x-large, xx-large
| relative - larger, smaller 
| length which may be 
     absolute units - in, cm, mm, pt, pc
     relative units - em, ex, px
     percentage - relative to parent

number (font-size * number) 
| length which may be 
     absolute units - in, cm, mm, pt, pc
     relative units - em, ex, px
     percentage - relative to font-size

specific font name 
or generic name (serif, sans-serif, fantasy,
                 monospace, cursive, fantasy) 
multiple fonts allowed in order and separated
by commas, for example: 
Verdana, Helvetica, sans-serif. 
If font name contains spaces - enclose 
in quotes, for example: "Trebuchet MS".

font:bold 12pt "Times Roman",serif;
# next line is exactly the same
font: normal bold 12pt "Times Roman",serif;

# with line height
font: italic 12px/14px "Times Roman",serif;

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

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.