Syntax of Cascading Style Sheets

Overview

The principle and the goal of CSS is to separate the content and the presentation of the document. The presentation is described by the style sheet that is a separate file or embedded into the <style> tag. The style sheet defines the layout, fonts, colors, etc... for given elements of the HTML page or XML document. This document is a very short summary of the standard CSS 2.0 specification by W3C.
CSS and HTML are case-insensitive, XML is not.

Main components

A style sheet is a set of rules. Each rule is made of a selector and a descriptor.
The set may start by some at-rules as @import for example.
The selector is the name of a tag and the descriptor is a list of properties enclosed between curly braces that define the presentation for this tag.
It is possible to associate several selectors together, separated by a comma, with a same descriptor (see at 'sharing a descriptor'' further.

Selector

It is the name of the element of the Web page (or XML document) we want to give properties for the display:

Type.
For example H1, A, P, PRE, etc...
Identifier.
Elements with an ID="" attribute. The syntax is:
```
#identifier
```
Class.
Elements with a CLASS="" attribute. The syntax is:
```
.classname
```
Descendant (sub-element).
This is a style for a tag only when embedded (directly or not) into another defined tag.
Example for a link when it is displayed inside a table:
```
table a
```
Adjacent (successor with same parent).
Element following immediately another given element. Syntax: x + y
Child.
Element directly embedded into another one, but not its childs. Syntax: body > p

Tag with a given attribute.

Syntax: tagname[attribute="value"]
Example: table[width="100"]

The universal selector.
* matches any element in the page. Used as a whole, not to replace a part of string.

See the complete specification in: CSS 2 and CSS 3 selectors.

Descriptor

The descriptor is a list of declarations that associate by a colon, an attribute and its value.

h2
{
  font-size:120%;
  color:blue;
}

Sharing a descriptor:

h2, h3
{
  color:green;
}

Some properties have several values:

.title
{
  border: 2px solid black;
}

Including the style into a document

Inside the head section of the HTML page:

The rules may be embedded into a style tag:

<style type="text/css">
...rules...
</style>

or a link may be used (the linked document is a simple text file holding a set of rules or at-rules):

<link rel="stylesheet" href="example.css" type="text/css" />

As property of a tag

Example:

<table style="color:blue;">

Import

The import command is an at-rule, it can occurs at start of a style sheet:

@import "mystyle.css";

XML document

The first line of the document includes the style sheet by a processing instruction (actually this depends upon the XML parser and renderer):

<?xml:stylesheet type="text/css" href="example.css" ?>

Size

Size may be expressed in several notations:

em: floating-point value for the font itself.
px: pixel, integer value for the screen or other device.
%: percentage of the inherited value (the top value may be 100% and is taken from browser's configuration).
pt: point, 1/72 of one inch.
mm: millimeter.

Color

Codes of colors are expressed either as hexadecimal or decimal RGB values.

rgb: #ffffff - Three hexadecimal values for red, green, blue components of the color.
rgb short: #fff - The digits will be doubled.
decimal: rgb(255,255,255)

Compatibility

Compatibility between browsers can be improved by declaring these doctypes in the first line of the HTML page:

<?DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd"> 
or:
<?DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

References

CSS 2.0 Recommendation by W3C.
Validator. Verify the syntax of a stylesheet.