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.