A style sheet, also referred to as 'Cascading Style Sheets', is a template that
controls the formatting of HTML tags on your Web pages. You can make all of
your HTML layout and formatting changes in one location, either in a separate
file or at the top of each HTML page.
To embed a style sheet, you add a <STYLE> </STYLE> block at the top of your
document, between the <HTML> and <BODY> tags. This allows you to change
the appearance of a single Web page.
The <STYLE> tag has one parameter, TYPE, which specifies the Internet type as
"text/css" (allowing browsers that do not support this type to ignore style sheets).
The <STYLE> tag is followed by any number of style definitions and terminated
with the </STYLE> tag.
Within the .DIV.head tag, we have specified the color, style and size of the
font that will appear on your web page. You can add as much as you want to
this section. i.e - font weight, text alignment, margins, and backgrounds, you
just have to decide what works best for your page.
As you can see, we are building up the information in our style sheet tags,
giving us more control over the way you can design your fonts and images
within your page. Notice, this time we have put three style definitions
which are: .descript1, .descript2 and .band
Each one has different attributes to give the effect of overlapping text - this
information has to be placed within the <DIV> tag within the <BODY> tag. In
order for the style sheets to work properly. The example below shows you
what effect this particular style sheet looks like.
To link to an external style sheet, you simply create a file with your style
definitions, save it with a .CSS file extension, and link to it from your Web page.
This way, you can use the same style sheet for any number of pages on your site
and this also stops people stealing your groovy style sheet when they view the
For example, if your style sheet is called mystyles.css and is located in the
same place as your webpages, you'd add the following code within the <HEAD>
tag. (see above)
If you're using embedded styles, you need to make sure that your style
definitions do not get displayed as regular text in browsers (such as Netscape)
that don't support all style sheets. Although the newer versions (5.0 and above)
of Netscape, Mozilla and Opera do fully support style sheets. Browsers that don't support style sheets display the pages using the browser's default settings
Netscape will ignore the <STYLE> and </STYLE> tags, but will interpret the
style definitions in between these as regular text, because they are not enclosed
in angle brackets. To fix this, embed your style block within a comment, like the
This is a very simple Style Sheet overview and if you understood it and want to
learn more about Style Sheets there are plenty of CSS recourse centers on the
www, I have listed some of my favorites below so, if you want to learn more
advanced CSS then click on the links below.