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 page (actually, grey at first). So along came things like images, tables, frames, and forms. These could all be presented on the page using straight HTML code.
Web designers clamoured 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 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 Stylesheets. 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.

What is a Stylesheet?

If you were using a word processor like Microsoft Word, 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 Stylesheets, 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 set the first paragraph of every page to bold and italics, you'd have to do this for every single paragraph that needs it:

<P>
<B><i>This is the first paragraph on page One. The same font styles are needed for each page on my web site.</i></B>
</P>

With Stylesheets, 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 Stylesheet code and all the first paragraphs of your pages would change.
A stylesheet is set up by using the word STYLE in between two angle brackets. An end STYLE tag is needed to tell the browser to stop formatting the style:

<STYLE>

</STYLE>

Your stylesheet code then goes between the two Style tags. Here's a style that can change text blue:

<STYLE>

.Font1 { Color: Blue }

</STYLE>

<P Class =" Font1">

This is my text.

</P>

Although you may not understand the code layout yet, the point is that you can add other styles to the one above that we have called Font1. We can add a bold style and a size style:

<STYLE>

.Font1 {
Color: Blue;
Font-size: 24pt;
Font-weight: Bold;
}

</STYLE>

Now the part of the code where we applied the style (P Class = Font1) will have its text updated. We don't have to make any changes at all to the P part of the code.
So a style is way to change blocks of code (or even individual words) and apply formatting to the block as a whole. You don't need individual HTML tags in the BODY of your page; just using the style name once will ensure that your formatting is applied to the whole block.

In the next lesson, you'll learn about CSS Rules.

Posted in: Tips,Trick,Tutorial,Web Design,Web Design 3 (Getting started with CSS)