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

What to do now?

I did begin to write some tutorials but since all I’m doing is replicating what is already available I decided it was far easier to point you towards some excellent resources.

Resources:

CSS Tutorials: w3schools.com | maxdesign.com.au | htmldog.com | mako4css.com

CSS Experiments: csszengarden.com.

Expert CSS help: mayerweb.com.

Cutting edge CSS design: meyerweb.com/eric/css/edge.

CSS Creator Forum: csscreator.com.

CSS guidance: thenoodleincident.com.

Styling for Print: alistapart.com.

Add your comment

Are you struggling with ranking, attracting visitors, generating leads or getting sales?

Or are you just stuck not knowing what to do next?

Call me on: 01252 643927 or 07921 859802 or Send me an email.

Or fill in this form which will appear as if by magic

Web Statistics