A Beginners’ Guide to Cascading Style Sheets
Cascading Style Sheets (CSS) allow you to change the fonts, colours, borders, margins, backgrounds, height, width and positions of any part of a web page without affecting the structure of the document.
The Cascading part of the name refers to the way style sheets can modify a single element, web page or website.
You can of course do the same thing using HTML styles, but changing styles in HTML means going though each page in turn to update the code. If you use CSS, all you need to do is change one document and the whole site is updated.
The other great advantage of CSS is its ability to position elements on a page without using tables, layers or maps. The list of articles on the right was created and positioned using a single style. If I want to adjust the list then all I have to do is tweak the style sheet and the whole thing changes.
CSS will also:
- Speed up your download times.
- Build your ‘printer friendly pages’.
- Let you build flexible pages that expand or contract to fit the browser window.
- Work in any combination of document types (html, php, asp…).
- Negate the need for structural tables.
A Logical Document Structure
For CSS to work properly you need to begin with a logical document structure. This means begin with a header, then a navigation list followed by more headers and paragraphs and finally a footer. If you do this then it becomes much easier to style each element in the document.
The advantage of using a logical document structure (as opposed to tables) means that the information can be accessed by all your visitors regardless of what operating system and browser they use.
For more information, see this article on logical document structures or how to resolve browser problems.
The Language of CSS
The language of CSS is pretty straightforward. All you need to remember is one basic rule that looks like this:
selector {property: value;}
The selector is the HTML element to which a style is attached: headers, paragraphs, lists etc.
The property defines what it is you want styling: font, colour, margin, border etc.
The value defines what the style actually is: colour, size, alignment etc.
The property and value together are known as the declaration.
For example, to change the h1 font size to 200% the style sheet would be:
h1 {font-size:200%;}
Note the use of the colon to separate the property from the value and the semicolon to mark the end of the declaration.
If you want more than one declaration in a style all you need do is ensure they are separated by a semicolon:
p {color:red; border:1px solid blue;}
Adding Style Sheets to a Document
Inline Styles
The simplest way to add a style to an element is to use an inline style. If I want to change the colour of a paragraph then the code is
<p style="color: red;">Red Text</p>
Which looks like this:
Red Text
The syntax is slightly different to the basic rule but all the important bits are in place: selector (p), property (color) and value (red).
Internal Style Sheets
If you want to add a style to a document then you need to add something like this to the head of the document:
<style type="text/css">h2 {text-align: right; color: green;}a {color: red; font-weight: bold;}</style>
Which will turn all number 2 headers green and align them on the right. It will also turn all anchors red and make them bold.
Anything you put between the <style> and </style> tags will be applied to the document.
External Style Sheets
If you want to apply a style to the whole website then you need to build an external style sheet. This works by adding a link to each page that looks something like this:
<link rel="stylesheet" type="text/css" href="styles.css">
The actual styles are contained in the “styles.css” document which is simply a list of all the styles. No HTML, no special instructions, just the styles. The external style sheet for this website is: styles.css