CSS introduction:

Introduction to Cascading Style Sheets

Cascading Style Sheets provide a very powerful, yet flexible means for formatting html content.
This page provides an overview of CSS and the various methods that can be employed to implement it in your html documents, and the differences between the different levels of CSS.

Quick Links:
Style rules
Style rule location
Style sheet cascade
CSS box model
Quick Links:
Element padding
Defining Borders
Defining margins
CSS levels

CSS in html works in a similar manner to style sheets in a word processing program, by defining a "style" that contains formatting options that can be applied to the elements in a document.
Consider the code example below.

  <title>A Sample Style</title>
<style type="text/css">
h1 { color: red; text–align: center; }
// ––>


The <style> element inside the <head> element in the code example above defines 1 style which sets the font colour of all <h1> elements throughout the document to red.
This could also be achieved by applying the code example below to all the <h1> elements throughout the document.

<h1><font color="red">Heading</font></h1>

If you did use the preceding method (<font> tags) and then later you changed your mind about the formatting, you would then need to change every <h1> element in the document.
Using CSS would mean that you only need to change the style definition in the head of the document to affect all other <h1> elements in the document.

Note icon CSS can be very complicated when you start to look at the different selector methods, inheritance and the cascade effect itself.
However, at the core of CSS is a very simple concept:
That is to assign formatting attributes in one place that can be easily modified later.

Style rules

All CSS style rules follow the same basic format which is illusrated in the code example below.

selector { property1: value1; property2:  value2;
propertyN: valueN; }

The formatting of CSS rules is very exact and follows the guidelines listed below:

  • The selector is followed by the formatting property definitions, which are enclosed in braces { }.
  • A colon separates each property/value pair and values that include spaces should be enclosed in double quotes, as illustrated by the example below.
    font-family: "Times New Roman";
  • Each property/value pair ends with a semicolon.
Light bulb icon The last property/value pair of a style definition does not necessarily need to end with a semicolon ;
But it is good practice to get into the habit of ending all property/value pairs with a semicolon.

The selector represents the element that the style definition should be used on, and the properties are the formatting proerties of the selected element that should then be set to the value specified in the style definition.
The code example below illustrates a simple style rule.

h1 { color: blue; }

The selector in the code example above (h1 causes the rule to be applied to all the <h1> elements throughout the document.
The color property affects the font colour of matching elements and in this example the font colour is set to blue.
It is also possible to specify multiple selectors to apply to the same style definition, by separating the the selectors with commas.
For instance if you wanted all the heading tags  throught 1 to 4 you could use the style definition in the code example below.

h1,h2,h3,h4 { color: blue; }
Top of pageTop of page


Style Rule Location

There are a few different ways to define CSS styles, they can be defined within an html document, or in a seperate and external style sheet.
It is also possible to use all the diffent methods in the same html document.
We will now look at the various methods for defining CSS styles .

Style definitions within tags.

Most of the html tags  have a style attribute that allows you to specify styles that will directly affect the tag  they are applied to.
For instance if you wanted to change the font colour of a particular <h1> element you could apply the code example below.

<h1 style="color: red;">Heading</h1>

Putting your styles between <style> tags  or in an external style sheet is a much better practice, than applying the style directly to individual tags.
However, sometimes applying a style directly to a particular tag  may be advantageous.

The <style> element.

The <style> element is just the same as other html elements in that it has opening and closing tags.
Everything between the <style> tags  is then treated as a style definition, and as such everything between the <style> tags  needs to follow the style definition guidelines.
An html documents <style> section must appear in the documents <head> section, multiple <style> sections are permisssible.
The <style> tags  format is illustrated in the code example below.

<title>Sample document</title>
<style type="text/css">
style definitions ...
// ––>

Note that between the <style> tags  are html comment tags these will hide the style defintions from older browsers that do not understand CSS styles.

External style sheets.

You can also place style definitions in a separate file, and then reference the file from within the documents you wish to apply the style definitions to.
If you create a separeat style sheet file, you do not need to include the <style> tags,  only the style definitions are required.
The code example below illustrates what the definitions in the file could look like.

  /* styles for the main site */
h1 { text–align: center; color: blue; }
h2,h3,h4 { color: red; }
h1 { font–size: 18pt; }
h2 { font–size:: 16pt; }
h3 { font–size: 14pt; }
h4 { font–size: 12pt; }
p { font–size: 10pt; }

An external style sheet can have any valid file name, however it is advisable to use the .css file extension, to easily identify the file and its contents, for example the file could be named mainstyles.css

To link an html document to an external style sheet file, use the <link> tag,  in the <head> section of the html document.
The code example below illustrates the format of the <link> tag  used to link to an external style sheet file.

<link rel="stylesheet" type="text/css" href="url_to_style_sheet" />

I have used the style sheet file name example above in the <link> tag  in the code example below to illustrate what the <link> tag  would look like linking the document to the style sheet.

  <title>Sample document</title>
    <!–– meta tags go here ––>
<link rel="stylesheet" type="text/css" href="mainstyles.css" />

Any style sheet that is accessible by the user via http: can be linked to the same document using the <link> tag.
If the style sheet happened to be on another server, you would simply include the full url to the style sheet.
The code example below illustrates what the <link> tag  would look like.

<link rel="stylesheet" type="text/css"
href="www.somesite.com/styles/mainstyles.css" />

The same document can have several style sheets linked to it, when this situation occurs they follow the cascading guidelines which we will look at in the next section.

Top of pageTop of page


Style Sheet Cascade

The basic concept behind Cascading Style Sheets is that multiple style definitions can "trickle" or "cascade" down through several layers to affect an html document.
A document can have several layers of style definitions applied to it, the layers are applied to the document in the order listed below.

  1. The user agent settings (typically, the user can modify some of these settings).
  2. Any linked external style sheets.
  3. Any styles that are present in an <style> element.
  4. Styles that are specified within any tags  style atribute.

Each level of styles overrides the previous level where duplicate properties have beeen defined.
Consider the two code examples below, the first represents an extrnal style sheet mainstyles.css which is linked to the second code example which represents an html document home.htm

  /* styles for the main site */
h1,h2,h3,h4 { color: blue; }
h1 { font–size: 18pt; }
h2 { font–size: 16pt; }
h3 { font–size: 14pt; }
h4 { font–size; 12pt; }
p { font–size: 10pt; }
<title>Sample document</title>
<link rel="stylesheet" type="text/css" href="mainstyles.css" />
<style type="text/css">
h1 { color: red; }
// ––>
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit.Nulla massa purus, mollis
elementum, malesuada a, fermentum at, justo.
Proin et eros vel nisi rutrum volutpat

What will the colour of the text be in the <h1> heading in the document home.htm in the code example above? The colour specified in the external style sheet mainstyles.css is blue, but the style element in the <head> section of the document home.htm specifies the colour red for the text in the heading.
In this example the internal style defined in the style element in the document home.htm takes precedence and the colour of the text in the <h1> element is red.

Note icon An advantage of the cascade effect is that documents from different levels or departments can be similar, and yet have a slightly different look and feel to match their origin.
For example you could have a about.css style sheet linked to all the documents about the company that project a strong corporate image.
Then you could have a products.css style sheet for the products documents, that add new definitions or replaces some of the corporate styles to give the products documents a slightly different look and feel of their own.

An html document can have multiple instances of <style> elements or linked style sheets. In these cases the style sheets are applied in order, with subsequent definitions overriding any previous definitions.
A property will only be overridden when it appears multiple times, otherwise the styles are additive.
For instance in the example above the colour of text in the <h1> element is changed to red by the internal style definition, but the text will still be rendered in 18pt type using the style definition specified in the linked external style sheet, only the colour is changed.

Top of pageTop of page


CSS Box Formatting Model

To help specify containers (block–level elements) on a web page, CSS uses a metaphor, the box.
Each time you format a block–level element this applies to any element a paragraph, blockquotes, images, lists, whatever they are, for the purposes of CSS the formatting you define is for a box.
CSS is not concerned with what the box contains,  it just wants to format the actual box.

The box formatting model

The screenshot above illustrates the the box formatting model and how the margin, border, padding and the actual element itself relate to each other spatially.
You can configure each of the properties seperately or you can configure them together to format an element.

The Boxes Dimensions.

As a web page loads the first thing that the browser does is to render the block–level elements to determine what their physical dimensions are, and the font that has been specified, and any contents for the elements, and any other internal formatting instructions specified in the style sheet.
Then the browser looks at the elements padding, border and margins to determine what space it actually requires on the page.

Box dimensions screenshot

An elements padding is the distance between the outside edges of the element and it’s border.
An elements border is a simple line or ridge, and an elements margin is the distance between the border and the outer box of the next container or block–level element.

Top of pageTop of page



It is not always necessary to define padding for an element, but if you define a border you may then need to define padding so that the contents of the element do not look too crowded.
Consider the screenshot below of a document containing two tables, both of the tables has a border defined, the contents of the upper tables cells look crowded, unlike the contents of the cells in the table below which has padding defined.

Element padding  screenshot

There are five properties associated with padding they are listed below.

  1. padding (padding on all sides).
  2. padding–top
  3. padding-right
  4. padding–bottom
  5. padding–left

You will need to familiarise yourself with the –top, –right, –bottom, and –left additions to property names, this is they way that all box–related properties are specified.
For example, if you wanted all the paragraphs in a document to have padding only on the top, right and left then you could use the style definition in the code example below.

p { padding–top: 10px;
    padding–right: 10px;
    padding–left: 10px; }
Light bulb icon Note the liberal formatting of the style definition in the example above, as with html coding it is helpful to format style definitions with liberal white space, line breaks and indents.
This will make the code more legible for you and others if the style defintions need to be altered at a later date.

You can also use shorthand method to write the padding properties as ilustrated in the code example below.

p { padding: 10px  10px 0px 10px; }

The shorthand method described above also works for margins and borders, also note that there are no commas between the values just spaces.
The properties are always listed in this order top, right, bottom and left an easy way to help you remember is that the elements properties are listed in a clockwise order around the element starting at the top.

Top of pageTop of page



An elements default is to have no border, until one is actually defined for the element.
A border can be defined in two different ways, the first is to define the width, color, and the style of the border by side.
In the second method you define the width, color, and the style of the border individually for the box.

The border that is defined in the code example below illustrates the first method and will create a black border on the top, right and the left sides of the <blockquote> element.

blockquote { border–width: 1px 1px 0px 1px;
             border–color: black;
             border–style: solid; }

The border that is defined in the code example below uses the second method to create an identical border.

blockquote { border–top: 1px solid black;
             border–right: 1px; solid black;
             border–left: 1px; solid black; }

Both the code examples above create the same border, which is inserted between the padding and the margin if either have been defined. Valid values for the border style are listed below.

  • none
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

If you want to create a border on all four sides of an element, you could define the style using the method described in the code example below.

blockquote { border: 1px solid black; }
Top of pageTop of page



An elements margins create white space on the outside of the elements border.
The two tables in the element padding screenshot above are immediately adjacent to each other this is simply because neither of the tables has margins.
The two tables in the box dimensions screenshot above have a little gap between them because I used the style float to position them side by side, and neither of the tables have any margins.

Margins are created using the margin property which can be applied in exactly the same way as the padding property described in the section above.
You can specify an elements margins seperately using margin–top, margin–right, margin–bottom and margin–left, or you can just use the margin property and specify a value for each side of the element.

blockquote { margin–top: 10px;
             margin–right: 10px;
             margin–bottom: 10px;
             margin–left: 10px; }
blockquote { margin: 10px 10px 10px 10px; }
Top of pageTop of page


CSS levels 1, 2, 3

There are three levels in CSS two of the levels are specifications and the third level is in recommendation status, there are notable differences between the two standards levels and the third in recommendation status.
The differences between them are listed below.

  • CSS1 defines basic style functionality, with limited font, and font positioning support.
  • CSS2 adds aural properties, pageed media, better font, and font positioning support, and many other properties have been refined.
  • CSS3 adds presentation–style properties, allowing the creation of
    presentations from web documents.

You do not need to specify the level of CSS that you are using in your documents, but you do need to consider the user agents that will access your site.
Although today most of the browsers support CSS, the level of support amongst the different manufacturers varies quite dramatically.
That is why it is always best to test your documents on the target user agents before you actually deploy them.

Top of page
Valid XHTML1.0 Transitional. Valid CSS. Copyright © 2005 –