.jpg)
INTRODUCTION TO STYLE SHEETS
Style sheets represent a major breakthrough for Web page designers,
expanding their ability to improve the appearance of their pages. In the
scientific environments in which the Web was conceived, people are more
concerned with the content of their documents than the presentation. As
people from wider walks of life discovered the Web, the limitations of
HTML became a source of continuing frustration and authors were forced
to sidestep HTML's stylistic limitations. While the intentions have been
good -- to improve the presentation of Web pages -- the techniques for
doing so have had unfortunate side effects. These techniques work for
some of the people, some of the time, but not for all of the people, all
of the time. They include:
-
Using proprietary HTML extensions
-
Converting text into images
-
Using images for white space control
-
Use of tables for page layout
-
Writing a program instead of using HTML
These techniques considerably increase the complexity of Web pages,
offer limited flexibility, suffer from interoperability problems, and
create hardships for people with disabilities.
Style sheets solve these problems at the same time they supersede the
limited range of presentation mechanisms in HTML. Style sheets make it
easy to specify the amount of white space between text lines, the amount
lines are indented, the colors used for the text and the backgrounds,
the font size and style, and a host of other details.
For example, the following short CSS style sheet (stored in the file
"special.css"), sets the text color of a paragraph to green and
surrounds it with a solid red border:
P.special {
color : green;
border: solid red;
}
Authors may link this style sheet to their source HTML document with the LINK element:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<LINK href="special.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P class="special">This paragraph should have special green text.
</BODY>
</HTML>
HTML 4 provides support for the following style sheet features:
FLEXIBLE STATEMENT OF STYLE INFORMATION
Placing style sheets in separate files makes them easy to reuse.
Sometimes it's useful to include rendering instructions within the
document to which they apply, either grouped at the start of the
document, or in attributes of the elements throughout the body of the
document. To make it easier to manage style on a site basis, this
specification describes how to use HTTP headers to set the style sheets
to be applied to a document.
INDEPENDENCE FROM SPECIFIC STYLE SHEET LANGUAGE
This specification doesn't tie HTML to any particular style sheet
language. This allows for a range of such languages to be used, for
instance simple ones for the majority of users and much more complex
ones for the minority of users with highly specialized needs. The
examples included below all use the CSS (Cascading Style Sheets)
language [CSS1],
but other style sheet languages would be possible.
CASCADING
This is the capability provided by some style sheet languages such as
CSS to allow style information from several sources to be blended
together. These could be, for instance, corporate style guidelines,
styles common to a group of documents, and styles specific to a single
document. By storing these separately, style sheets can be reused,
simplifying authoring and making more effective use of network caching.
The cascade defines an ordered sequence of style sheets where rules in
later sheets have greater precedence than earlier ones. Not all style
sheet languages support cascading.
.jpg)