An Introduction to Cascading
Style Sheets Part I
by Outfront Moderator Katherine
Nolan (abbeyvet)
OutFront News Article: January 10, 2001
Most of us are familiar with the use of HTML tags as
a means of formatting our pages. For example we can use
this tag:
<font face="Arial"
size="3">Arial 12 point</font>
to create Arial 12 point text, whether we apply it by
hand or using FrontPage.
However individually applying styles to each element of
your page in this way is laborious, prone to error and
creates bulky code. There is another way: welcome to
CSS, Cascading Style Sheets!!
What is a style sheet?
Print publications such as newspapers and magazines
have long used style sheets - sets of rules governing
page formatting, typefaces, nature of headlines etc -
to give them a consistent and coherent appearance.
Similarly in HTML documents style sheets can control
text formatting, colors, image placement and a myriad
of other features that determine how our pages look.
Why Bother with them?
1) Consistency: Style sheets are easy to construct and
can be readily applied to all the pages in your site,
ensuring continuity of style throughout.
2) Convenience: If you have used style sheets to format
your pages making changes to the format of your entire
site, or to individual pages, can be as simple as
making a small alteration to your style sheets or the
way in which they apply.
3) Consideration: Style sheet rules can be applied in a
manner that allows viewers to see your site in a way
that suits them. We will look at this in more detail
later.
4) Compulsion!: the use of inline tags to define style
– such as the <font></font> tag example
given above – will in the future be deprecated and we
will be required to use style sheets to format our
pages, so we may as well start now.
What about Browser
Compatibility?
Many people are put off using style sheets because they
have heard or read about poor cross browser support for
them. While it is true that there are differences in
the degree and nature of support given to CSS, it is
also true that very many features enjoy full cross browser
support and in many other cases it is possible to find
work rounds.
As with all other of web design the trick
is in knowing what browsers will do with your code and
then applying it accordingly. Throughout this series of
tutorials we will look at the issue of browser compatibility
wherever it is a consideration.
CSS Basics
For the moment let's forget about how style sheets
are structured and just have a look at how they are
applied.
There are three different ways to apply style
sheets:
1. Inline Styles
You can apply a style to any individual html tag in a page.
This is something you already do to some degree all the time. For
example, you can easily change the text colour of an
individual paragraph in your page. In so doing you are
applying a style to that portion of the page – or an
‘Inline Style’.
2. Embedded Style Sheets
An embedded style sheet controls the formatting of an
individual page. The Style Sheet is placed between the
<head> and </head> tags.
If you have used
FrontPages facility to apply a ‘rollover effect’ to
text links you will have placed an embedded style sheet
in the head of your document which will look something
like this:
<style fprolloverstyle>
A:hover {color: red; font-weight: bold}
</style>
This causes your hyperlinks, when in the hover
state, to appear red and bold.
In the case of CSS the effect it the same but
formatting is a little different and the same style
sheet would look like this:
<style type=text/css>
A:hover {color: red; font-weight: bold}
</style>
3. Linked Style Sheets
This is where the real power of style sheets is found.
You can create a stand alone set of instructions for
how things should appear on your page – a
Style Sheet - and then link it to as many pages of
your site as you wish.
This single style sheet will
control the appearance of all the pages and making a
change to it will affect all pages at once.
What about the ‘Cascading’
bit?
This is a term that seems to cause an immense amount of
confusion but really need not do so. The thing to remember is that you can
use each of the three different types of style sheet,
as defined above, in the same web site. Which one will
be applied in any situation is governed by a set of
priorities:
- In line styles take precedence
- Embedded styles come next
- Where neither an inline not an embedded style is used
the linked style will apply
This is referred to as the ‘cascade’.
Let's look
at it another way. Suppose you have a web site that
includes a style sheet to which all pages are linked,
giving it a nice professional and consistent
appearance. But you have a single page that you want to
appear radically different from the others. You can
simply place an embedded style sheet in the head of
this page and that style sheet will override the linked
one on that page.
Now you look at this page and it is fine – except for
one small section that, again, you would like to appear
in a different format. Simply apply an inline style and
this will, in turn, over ride the embedded one. Hurrah!
Your style sheets are cascading!!
Part II >>
