CSS Cascading Style Sheet: Advantage Of CSS
Advantage of CSS
Table of
Contents:
Simple to Use
If the depth of CSS
doesn't convince you, then perhaps this will: style sheets can drastically
reduce a web author's workload.
Style sheets can do this
by centralizing the commands for certain visual effects in one handy place,
instead of scattering them throughout the document. As an example, let's say you
want all of the headings in a document to be purple. (No, I don't know why you
would want this, but assume with me.) Using HTML, the way to do this would be to
put a FONT tag in every heading tag, like so:
This is purple!
This has to be done for
every heading of level two. If you have forty headings in your document, you
have to insert forty FONT tags throughout, one for
each heading! That's a lot of work for one little effect.
But let's assume that
you've gone ahead and put in all those FONT tags.
You're done, you're happy--and then you decide (or your boss decides for you)
that headings should really be dark green, not purple. Now you have to go back
and fix every single one of those FONT tags. Sure,
you might be able to find-and-replace, as long as headings are the only purple
text in your document. If you've put other purple FONT
tags in your document, then you can't
find-and-replace, because you'd affect them too.
It would be much better
to have a single rule instead:
H2 {color: purple;}
Not only is this faster
to type, but it's easier to change. If you do switch from purple to dark green,
all you have to change is that one rule.
Let's go back to the
highly styled H1 element from the previous section:
H1 {color: maroon; font: italic 1em Times, serif; text-decoration: underline;
background: yellow;}
This may look like it's
worse to write than using HTML, but consider a case where you have a page with
about a dozen H2 elements that should look the same
as the H1. How much markup will be required for
those 12 H2 elements? A lot. On the other hand,
with CSS, all you need to do is this:
H1, H2 {color: maroon; font: italic 1em Times, serif; text-decoration: underline;
background: yellow;}
Now the styles apply to
both H1 and H2
elements, with just three extra keystrokes.
If you want to change
the way H1 and H2
elements look, the advantages of CSS become even more striking. Consider how
long it would take to change the HTML markup for all H1
and 12 H2 elements, compared to changing the
previous styles to this:
H1, H2 {color: navy; font: bold 1em Helvetica, sans-serif;
text-decoration: underline overline; background: silver;}
If the two approaches
were timed on a stopwatch, I'm betting the CSS-savvy author would handily beat
the HTML jockey.
In addition, most CSS
rules are collected into one location in the document. It is possible to scatter
them throughout the document by associated styles to individual elements, but
it's usually far more efficient to place all of your styles into a single style
sheet. This lets you create (or change) the appearance of an entire document in
one place.
Using Your Styles on
Multiple Pages
But wait--there's more!
Not only can you centralize all of the style information for a page in one
place, but you can also create a style sheet that can then be applied to
multiple pages--as many as you like. This is done by a process in which a style
sheet is saved to its own document, and then imported by any page for use with
that document. Using this capability, you can quickly create a consistent look
for an entire web site. All you have to do is link the single style sheet to all
of the documents on your web site. Then, if you ever want to change the look of
your site's pages, you need only edit a single file and the change will be
propagated throughout the entire server--automatically!
Consider a site where
all of the headings are gray on a white background. They get this color from a
style sheet that says:
H1, H2, H3, H4, H5, H6 {color: gray; background: white;}
Now, let's say this site
has 700 pages, each one of which uses the style sheet that says headings should
be gray. At some point, it's decided that headings should be white on a gray
background. So the site's webmaster edits the style sheet to say:
H1, H2, H3, H4, H5, H6 {color: white; background: gray;}
Then he saves the style
sheet to disk, and the change is made. That sure beats having to edit 700 pages
to enclose every heading in a table and a FONT tag,
doesn't it?
Cascading
And that's not all! CSS
also makes provisions for conflicting rules; these provisions are collectively
referred to as the cascade. For instance, take the
previous scenario in which you're importing a single style sheet into a whole
bunch of web pages. Now inject a set of pages that share many of the same
styles, but also have specialized rules that apply only to them. You can create
another style sheet that is imported into those pages, in addition to the
already existing style sheet, or you can just place the special styles into the
pages that need them.
For example, you might
have one page out of the 700 where headings should be yellow on dark blue
instead of white on gray. In that single document, then, you could insert this
rule:
H1, H2, H3, H4, H5, H6 {color: yellow; background: blue;}
Thanks to the cascade,
this rule will override the imported rule for white-on-gray headings. By
understanding the cascade rules and using them to your advantage, you can create
highly sophisticated sheets that come together to give your pages a professional
yet easily changed look.
This ability is not
confined to just the author. Web surfers (or readers)
can, in some browsers, create their own style sheets (called
reader style sheets, oddly enough) that will cascade
with the author's styles as well as the styles used by the browser. Thus, a
reader who is color-blind could create a style that makes hyperlinks stand out:
A:link {color: white; background: black;}
A reader style sheet
could contain almost anything: a directive to make text large enough to read, if
the user has impaired vision; rules to remove images for faster reading and
browsing; even styles to place the user's favorite picture in the background of
every document. (This isn't recommended, of course, but it is possible.) This
lets readers customize their web experience without having to turn off all of
the author's styles.
Between importing,
cascading, and its variety of effects, CSS becomes a wonderful tool for any
author or reader.
|