Cascading Style Sheets/Introduction

From WikiKnowledge

Before CSS a web page had to be designed using HTML only. The problem with this is that HTML was never designed to describe the presentation on a page. Let's say for example that you have a web page with three headings like this:

<h1>Heading 1</h1>
    <p>Some text...</p>
<h1>Heading 2</h1>
    <p>Some text...</p>
<h1>Heading 3</h1>
    <p>Some text...</p>

Now if you wanted to change the color of the headings you would need to use the font tag like this:

<h1><font color="red">Heading 1</font></h1>
    <p>Some text...</p>
<h1><font color="red">Heading 2</font></h1>
    <p>Some text...</p>
<h1><font color="red">Heading 3</font></h1>
    <p>Some text...</p>

This is not such a big problem with only three headings all an the same page, but for a large website with hundreds of headings over hundreds of pages even this simple change of color quickly becomes very time consuming. The bigger the site is the harder it becomes to make even simple changes. This is where CSS comes in. Using css we can use the first code block shown above without the font tags, then use a separate css file to make changes to the heading color. So instead of using lots of font tags we can use a single css rule:

h1{color:red;}

and that's it!

You can also do more using CSS then you can do with HTML. A simple example is making link on a page have an underline on them only when the mouse pointer is pointing at it. The CSS rules needed to do that is:

a{ text-decoration: none; }
a:hover { text-decoration: underline; }

The first rule turns off the underlines on all the links on the page. The is necessary because by default all links are blue with an underline. The secound rule turns the underline back on when a link is being pointed at. A very simple effect that is very easy to achieve with CSS, but can't be achieved at all using HTML.

[edit] Navigation