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.
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:
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:
Color: Blue;
Font-size: 24pt;
Font-weight: Bold;
}
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.
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:<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>
<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.This is the first paragraph on page one. The same font styles are needed for each page on my web site.
</P>
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.
