Introduction To Cascading Stylesheets (CSS)

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.

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.

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

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.

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 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.

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; }

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.

<html>
<head>
<title>Sample document</title>
<style type="text/css">
<!––
style definitions ...
// ––>
</style>
</head>
<body>

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.

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.

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

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.

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.

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.

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; }

<html>
<head>
<title>Sample document</title>
<link rel="stylesheet" type="text/css" href="mainstyles.css" />
<style type="text/css">
<!––
h1 { color: red; }
// ––>
</style>
</head>
<body>
<h1>Heading</h1>
<p>
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
</p>

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.

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.

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 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.

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.

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.

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

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; }

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.

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.

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; }

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; }

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.

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.

Introduction to Cascading Style Sheets

Style rules

Style Rule Location

Style definitions within tags.

The <style> element.

External style sheets.

Style Sheet Cascade

CSS Box Formatting Model

The Boxes Dimensions.

Padding.

Border.

Margins

CSS levels 1, 2, 3