1.0 CSS (Cascading Style Sheets)

You will have heard many references to CSS during the HTML Tutorial and now we're finally here. Cascading Style Sheets, or CSS for short, is a style sheet language used to define the presentation of documents written in a markup language. It is most commonly used to style web pages written in HTML and XHTML but can also be applied to any kind of XML document.

CSS was designed primarily to seperate document content from document presentation (layout, colours, fonts etc). This improved content accessibility, provided more flexible presentation, enabled multiple pages to share formatting, and reduced the complexity and repetition in the structural content (such as by allowing for tableless web design). CSS also allowed the same markup page to be presented in different styles for different rendering methods, such as screen, print, voice and even for Braille-based devices. Put simply: HTML is used to structure content; CSS is used for formatting that content. Think of HTML as a builder, and CSS as a painter and decorator.

CSS Properties

The properties (or attributes) in CSS cover fonts, colours, margins, lines, height, width, background images, position and much more. CSS uses a lot of HTML tags as selectors, with just a slight difference in syntax. Again a simple text editor like notepad can be used and the basic format for writing CSS is selector (tag), property (attribute) followed by the value, and is written thus:

selector	{property: value;}

Note that the property (attribute) and its value are written between curly brackets, with a semi-colon after the value (for seperating from additional properties). This is the basic format of all CSS. For example:

h1	{color: blue;}

p	{font-size: 16px;}

This would make all <h1> headings render in blue and set all <p> paragraph text in the HTML document to 16px in size.