Cascading Style Sheets Basics

Cascading Style Sheets (CSS) are a very simple to use and effective way to control how web pages look. CSS gives more precise control over the finished page and allows you to modify attributes not possible with conventional formatting. By using CSS the formatting of the document is separated from the content.

Compare the use of conventional tags and attributes to format heading style <h5>:

<h5 align="center"><font face="Arial" color="#00CCCC"><i>Conventional formatting.</i></font></h5>

... with using style code in the document:

<h5 style="font-family: Arial; font-size: 18px; color: #00CCCC; text-align: center; font-style: italic">Styled with CSS.</h5>

Adding the style code inline is just as cumbersome as conventional formatting, so you can put the style code in the <head> section of the web page so that every instance of <h5> is formatted exactly the same, like this:

<style type="text/css">
h5 { font-family: Arial;
     font-size: 18px;
     color: #00CCCC;
     text-align: center;
     font-style: italic }
</style>

Then in the body of the web page the paragraph would just contain the HTML elements and no formatting information, like this:

<h5>Styled with CSS.</h5>

This CSS example would instruct the browser to display all occurrences of text formatted as heading style <h5> in Arial font, with characters 18 pixels high, in the colour teal, centred and italic, like this:

Styled with CSS.
  • Unlike the attribute values in conventional HTML tags you should not put CSS property values inside quote marks, unless the value contains a space (like the name for a font family, e.g.: "Courier New"). Also if there is just one mistake in one line of the CSS it can stop the entire style sheet working properly. Each property: value declaration must be separated by a semi-colon. They do not have to be on separate lines, but it does make the code easier to read and edit.

How to apply Cascading Style Sheets

Almost every HTML tag can have attributes assigned to it using CSS but if they were all entered in the <head> section it would make the documents much larger. This duplication is not necessary, the style sheet information could be entered in a separate .css file referenced in the <head> section as a relative link, like this:

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

This instructs the browser to format this page based on the characteristics defined in style sheet normal.css. Any number of HTML files can use the same style sheet file. The stylesheet file then only contains the HTML tags and their attributes, not the <style ... > </style> tags.

Another benefit of using CSS is that if you ever want to change the appearance of your web pages, you only need to edit the values in the CSS file. All the HTML files linked to it will inherit the new attributes without the need to edit any of the HTML pages.

What makes Cascading Style Sheets Cascade?

If you create a Cascading Style Sheet and put a relative link to it in a web page (as described above) that CSS file will have overall control of all the defined characteristics in the web page.

However if you add some style formatting code in the <head> section of the web page this will take precedence over the external Cascading Style Sheet. You might do this where one page in your web site has some special requirements not used elsewhere.

But if you add some inline style formatting code, this take precedence over all other style formatting instructions.