Syntax of CSS, a summary

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" 
  "https://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.