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:

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:

Color

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

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

© 2006-2012 Xul.fr