An Introduction to Cascading Style Sheets

HTML was not intended to be a graphic design tool. It was set up as a simple way to display text in a browser, rather like a word processor displays text on a page. Tags were added over the years in order to add a bit of colour and life into the basic white (actually, grey at first) page. So along came things like images, tables, frames, and forms. These could all be presented on the page using straight HTML code.

Recently, web designers have been clamouring for a better way to present their work on a web page. Plain HTML just wasn't enough. After all, with HTML, in order to get text or an image exactly where you want it, you have to resort to complicated tables to force the alignment. And suppose you want colour behind a single paragraph of text, and not have to colour the entire page? Very tricky with straight HTML. And what about those hyperlinks? Is there any way, with HTML, that we can turn the underline on and off?

These questions, and many more, were finally addressed by the introduction of Cascading Style Sheets. A Style is, basically, just another way to manipulate elements on a page, in order to bring a spark of life into your web design.

If you were using a word processor like Microsoft Word or Lotus Word Pro, you could tell the word processor how you want blocks of text to be formatted. For example, all of your page Headings could be in 28 point Times, bold, and coloured red. If you wanted the same Heading again, you can just click a drop down list and select the Heading style you set up.

Using straight HTML, you can't do that. There's no way to apply the same formatting with a single Tag. Cascading Style Sheets, however, let you do precisely that - change whole blocks of text with a single tag. This not only makes your code easier to read, it is also very simple to change all the formatted blocks of text to say a different font size or font colour.

For example, in HTML, if you want to make the first paragraph of every page bold, 18 points, Times New Roman, and Red, you'd have to do this for every single paragraph that needs it:

<P>
<FONT SIZE = 18 FACE = "Times" COLOUR = Red>
<B>
This is the first paragraph on page One. The same font styles are needed for each page on my web site.
</B>
</FONT>

</P>

With Style sheets, you can get rid of all that code, and place it in the HEAD section of your page. You would then just apply the Style to any paragraph that needs it. Like this:

<P Class = FirstParagraph>

This is the first paragraph on page One. The same font styles are needed for each page on my web site.

</P>

The new code, I'm sure you'll agree, looks much cleaner. And if you decided that the text colour should be Blue, you can just make one change to your Style Sheet code and all the first paragraphs of your pages would change.

We'll see how to use and set up Style Sheets in the pages that follow. You can make a start by clicking the next page link below.

Move on to the Next Part -->

<--Back to the Style Sheets Contents Page

View all our Home Study Computer Courses