Syntax of Cascading Style Sheets


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.


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.


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

Sharing a descriptor:
h2, h3

Some properties have several values:

  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">

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


<table style="color:blue;">


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 may be expressed in several notations:


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


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 Transitional//EN"


© 2006-2012