Style Sheets

(For Netscape Communicator and Internet Explorer 4.0 only.)

Part 1 - Introduction

Anyone who spends any time at all browsing the Internet will by now have heard something about this cool new web designing tool called 'Cascading Style Sheets'. This tutorial is aimed to give a basic overview of Style Sheets and how to use them in your web pages.

There are many advantages to using Style Sheets, one of the most important is the ability to produce a consistent style throughout your web pages and to be able to change them simultaneously by editing one piece of text.

There are several ways to incorporate this new code in your web pages:

  • Inside the <head></head> tags:

    <html>
    <head>
    <style type="text/css">
    <!--
    h3 { font-family: comic sans ms; color: blue; font-style: italic }
    em { color: red; font-size: 14pt }
    -->
    </style>
    </head>
    <body bgcolor=black>
    <h3>This is an h3 heading using the above code.</h3>
    <p><em>This is some text.</em>
    </body>
    </html>

  • Inside a particular html tag:

    <html>
    <body bgcolor=black text=white>
    <h3 style="font-family: comic sans ms; color: blue; font-style: italic">This is an h3 heading using the above code.</h3>
    <h3>This is a plain h3 header.</h3>
    </body>
    </html>

  • As a separate .css file referenced from inside the HTML file:

    test1.css

    h3 { font-family: comic sans ms; color: blue; font-style: italic }
    em { color: red; font-size: 14pt }

    test1.html

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="test1.css" title="test1">
    </head>
    <body bgcolor=black>
    <h3>This is an h3 heading using the style sheet.</h3>
    <p><em>This is some more text.</em>
    </body>
    </html>

In the above cases the code: h3 { font-family: comic sans ms; color: blue; font-style: italic } tells the browser how to display every <h3> heading, i.e. in comic sans ms font, italic and blue, and: em { color: red; font-size: 14pt } ensures that all text tagged as italic, <em>, is red and 14pt in size. Hence you can see that just by changing the colour of the h3 code to color: yellow; you would change every <h3> heading in your page to yellow.

Details of the attributes will be covered in the following sections.

Back Next