Style Sheets

Part 8 - Classes and ID's

All this time we have been associating properties directly with a particular tag but there are two other ways of indicating properties: Classes and Id's.

  • classes

    You define a class by giving it a name (always preceded by a full stop) and adding the properties inside the curly brackets as you have seen through this tutorial. Once you have defined a class you can associate it to any html tag as below.

    <html>
    <style type='text/css'>
    <!--
    .alison { color: yellow; background-color: blue; font-family: comic sans ms }
    -->
    </style>
    <body class="alison">
    <p>This is a paragraph in a document using the class alison.</p>
    </body>
    </html>

  • id's

    id's are used in basically the same way, except they are preceded by a # instead of a full stop. As with classes, once you have defined an id you can associate it to any html tag as below.

    <html>
    <style type='text/css'>
    <!--
    #alison { color: yellow; background-color: blue; font-family: comic sans ms }
    -->
    </style>
    <body bgcolor=black>
    <p id="alison">This is a paragraph in a document using the id alison.</p>
    </body>
    </html>

    There are several tags and properties that haven't been mentioned in this tutorial because they don't appear to have been implemented yet. As things change i will be adding more details.

The End... for now!

Back