Introducing Cascading Style Sheets

Description

Cascading Style Sheets also known as C.S.S. or styles allow you to assign several properties at once to tags on your (X)HTML pages.

This is a departure from HTML. HTML pages become very complicated and unwieldy when formatting and styling is incorporated using HTML e.g. the Font tag,
background color attributes etc. And using tables for layout. You end up with nested tables that becomes complicated to work out how page items are laid out.

CSS is designed to solve most of these problems by removing the layout, formatting and styling code from HTML.

HTML Example: Code:

    
    <p><font size="3" color="#ff0000"><b>Heading 1</b></font></p>
    

Example:

Heading 1

CSS Example: Code:

    <style>
        p { color:#ff0000; font-size: 12pt; font-style: italic;}
    </style>
    
    <p>Heading 1</p>

Example:

Heading 1

with the purely HTML example you need to pepper your code with font tags and bold tags wherever there is text.
Using CSS you can specify the text formatting for a p tag in one place which will apply to all p tags. So in order to change the text formatting properties of p tags in your entire site you only need to change the code in the style tag!!

CSS allows many different ways to identify which tags to apply the CSS styles to. For example you might not want all p tags to have the same formatting. You can do this by using the class attribute:

    <style>
        p.style1 { color:#ff0000; font-size: 10pt; font-style: italic; }
        p.style2 { color:#ff00ff; font-size: 12pt; font-style: bold; }
    </style>
    
    <p class="style1">text paragraph 1</p>
    <p class="style2">text paragrapg 2</p>