mail us  |  mail this page

contact us
training  | 
tech stuff  | 

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

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.

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. Multiple classes may appear in any html class tag, thus, <p class="one two three"></p> is both valid and powerful.
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). Multiple levels are supported. Note: You really need to know your DOM hierarchical models for this selector to be effective. For example, if working with nested tables then this style of selector will only format the td tags in a table with class="outertable" (any nested table td tags are unaffected) table.outertable > tbody > tr > td {...} (yeah, we forgot the tbody and couldn't figure out why it was not working).
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.

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.

Forms Allowed Description
background:color image repeat attach h-pos v-pos
Since the keywords are all different you can leave out missing elements as long as they remain in order. Long forms are background-color: (#RRGGBB or #RGB) , backround-image: (url(path) | none), background-repeat: (repeat | repeat-x | repeat-y | no-repeat ), background-attachment: (scroll | fixed), background-position: h-pos v-pos where: h-pos (percent | unit | top | center | bottom) v-pos (percent | unit | left | center | right). If only h-pos given, v-pos assumes 50%. Cannot mix units or percentages with keywords.
font:style variant weight size[/height] family Since the keywords are all different you can leave out missing elements as long as they remain in order. Long forms are font-style:
(normal | italic |oblique)
font-variant:
(normal | small-caps)
font-weight:
(normal | bold | bolder | lighter | 100 | 200
| 300 | 400 | 500 | 600 | 700 | 800 | 900)
font-size:
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
line-height:
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
font-family:
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".
Examples:
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;
border:1px solid red; [ALL]
Controls the width, style and color of the border in one shot. If you need different border widths or styles you need one of the other forms below. Long form 'border-width:', 'border-style:', 'border-color:' etc.
border-width:1px; [ALL]
border-width:1px 2px; [H V]
border-width:1px 2px 3px; [T V B]
border-width:1px 2px 2px 1px; [T R B L]
Controls the width of the element border. Can also take values 'thin | medium | thick'. Long form 'border-left-width:', 'border-right-width:' etc.
border-style:solid; [ALL]
border-style:solid dotted; [H V]
border-style:solid dotted double; [T V B]
border-style:solid dotted none double; [T R B L]
Controls the border style applied to the element. Can take the values 'none | solid | dotted | dashed | double | groove | ridge | inset | outset'. Long form 'border-style-left:', 'border-style-top:' etc.
border-color:red; [ALL]
border-color:red blue; [H V]
border-color:red blue cyan; [T V B]
border-color:red blue cyan silver; [T R B L]
Controls the border color applied to the element. Can take a standard color red | blue | silver | cyan | white | black (there are apparently 147 of them) or the #RGB form. Long form 'border-color-left:', 'border-color-top:' etc.
margin:1px; [ALL]
margin:1px 2px; [H V]
margin:1px 2px 3px; [T V B]
margin:1px 2px 2px 1px; [T R B L]
Margins add transparent space outside the element (mostly). Can also take a percentage or 'auto'. Long form 'margin-top:', 'margin-right:', 'margin-bottom:', 'margin-left:'.
padding:1px; [ALL]
padding:1px 2px; [H V]
padding:1px 2px 3px; [T V B]
padding:1px 2px 2px 1px; [T R B L]
Controls the amount of space between the border and the content. Can take a percentage. Long form 'padding-top:', 'padding-right:', 'padding-bottom:', 'padding-left:'.
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.

Tech Stuff

RSS Feed Icon

If you are happy it's OK - but your browser is giving a less than optimal experience on our site. You could, at no charge, upgrade to a W3C standards compliant browser such as Firefox

Search

web zytrax.com

Share

Icons made by Icomoon from www.flaticon.com is licensed by CC 3.0 BY
share page via facebook tweet this page

Page

email us Send to a friend feature print this page Display full width page Decrease font size Increase font size

Resources

HTML Stuff

W3C HTML 4.01
HTML5 (WHATWG)
HTML4 vs HTML5
HTML5 Reference
W3C Page Validator
W3C DOCTYPE

CSS Stuff

W3C CSS2.1
W3C CSS2.2
Default Styles
CSS3 Selectors
CSS 3 Media Queries
CSS 3 Colors

DOM Stuff

W3C DOM
W3C DOM 3 Core
W3C 3 Events

Accessibility

usability.gov
W3C - WAI
Web Style Guide
WebAim.org

Useful Stuff

Peter-Paul Koch
A List Apart
Eric Meyer on CSS
glish.com

Our Stuff

Our DOM Pages
DOM Navigation
Liquid Layout
CSS Short Cuts
CSS overview
CSS One Page

Javascript Stuff

ECMA-262

Site

CSS Technology SPF Record Conformant Domain
Copyright © 1994 - 2017 ZyTrax, Inc.
All rights reserved. Legal and Privacy
site by zytrax
Hosted by super.net.sg
web-master at zytrax
Page modified: December 15 2015.