 The magazine of the Melbourne PC User Group Cascading Style Sheets: What Can CSS DO for You? Major Keary majkeary@netspace.com.au |
 |
Designed for use with HTML documents - but accessible by XML - CSS enables
enrichment of the visual presentation of web pages and allows HTML to revert to its original intended
function: document structure. Already a number of HTML tags (<FONT>, <BASEFONT>, <U>,
<STRIKE>, <S>, and <CENTER>) have been deprecated, which means they are being phased out
because their functions a re to do with style.
CSS enables much richer presentational features than is possible with HTML, no matter how HTML is c ontorted.
The use of CSS results in smaller files because it does not require bloated HTML code. C ascading Style
Sheets provides an example. Suppose an author wants to place a main heading, My Home P age, so that the text
is dark red, uses a particular font, is italicised, underlined, and has a yellow b ackground. In between the
<H1> and </H1> tags will be enough other formatting information to fill a pantechnicon. CSS does
it this way:
H1 (color: maroon; font: italic lem Times, serif, text-decoration: underline; background: yellow;)
There are some extra things that HTML can't do:
H1 (color: maroon; font: italic lem Times, serif; text-decoration: underline; background: yellow url
titlebg.png) repeat-x; border: 1px solid red; margin-bottom: 0; padding: 5px;)
"Now we have an image in the background of the H1 that is only repeated horizontally, plus a border, around
H1 that is separated from the text by at least five pixels, and we've removed the margin (blank space) from
the bottom of the element." When a CSS-enabled browser encounters:
<H1>My Story</H1>
it will automatically apply the formatting.
But, you say, that's about as bad as writing HTML code. However, suppose that style is to be translated to H2
level headings, and there are umpteen of those in the document. In HTML each occurrence requires a repetition
of the full complement of tags. By the simple process of adding to the CSS rule:
H1, H2 (color: maroon; font: italic 1em Times, serif, text-decoration: underline; background: yellow url
titlebg.png) repeat-x; border: 1px solid red; margin-bottom: 0; pading: 5px;)
all instances of H2 level headings will be given the same treatment, but using the font size appropriate to
the H2 level.
How does one get CSS information into an HTML document? Good question; a use has been found for a
long-standing HTML tag: <LINK>. A typical CSS reference might look like this:
<LINK REL="stylesheet" TYPE="text/css"<r>
HREF="sheetl.css"><r>
<STYLE TYPE ="text/css>
<@importurlsheet2.css);
H1 (color: maroon;)
BODY (background: yellow;)
</STYLE >
Separate stylesheet files are created, such as sheet1.css, which enables users to create distributable
libraries. Another way in which they can be applied is, for example, the case of a Web Master who requires
that contributors follow a common style. If the Web Master maintains appropriate style sheets on the server,
authors don't need to include the stylesheet data verbatim. As long as they insert the correct LINK
references their documents, once uploaded to the server, will be parsed correctly.
CSS is still being developed, but web authors can be sure of one thing: formatting tags will be progressively
deprectated in HTML and XHTML as cascading style sheets take over the task of presentation.
Getting back to Cascading Style Sheets: The Definitive Guide, it is a text that will suit newcomers to
CSS as well as those who have some experience in CSS use. Even the HTML/CSS literati will find this a
valuable reference.
It is an introduction, a tutorial, and a reference that covers all aspects of CSS features that are presently
supported.
Reprinted from the July 2000 issue of PC Update, the
magazine of Melbourne PC User Group, Australia
