If you've ever created a web site, you've most likely used an assortment of <font>
and other tags to control how your pages look. This ties the presentation
of your site with its content, making it hard to modify your site's design. Suppose you later
decide you want to change the color scheme or fonts used in your site - you'll have to edit every page
in order to do this.
Style sheets provide a solution to this problem. Instead of defining the site's design in each and every page, you can use a style sheet to control the overall layout of your site. Then if you want to change how your site looks, you simply modify the style sheet.
A style sheet is made up of rules that look something like this:
H1{
font-family: "TIMES NEW ROMAN";
font-style: BOLD;
color: RED
}
Each rule begins with a selector, which is H1 in the example above.
A selector is normally one or more HTML elements (tags), and the declarations inside the rule
describe how those elements should appear. A declaration is simply a CSS property followed by
a value. For example, the declaration "font-style:
BOLD;" is composed of the property
"font-style" followed by the value
"BOLD". So, this example states that every
<H2> HTML tag should use an TIMES NEW ROMAN BOLD font and be colored RED.
You can also use classes as selectors, which aren't tied to specific HTML elements. For example,
consider this rule:
.redbold {
font-family: TIMES NEW ROMAN;
font-style: BOLD;
color: RED
}
The declaration block is the same as that in the previous example, but instead of using H1 as the selector,
we're using the class .redbold. Note that .redbold
doesn't mean anything special - you can use anything as a class name provided that it starts with a period
and is composed of a single word (spaces and underscores are not allowed).
To apply a class to an HTML tag, you use the the class attribute (which was introduced in HTML 4.0).
For example, to apply the above style to an <H1> tag, you'd use:
<H1 CLASS="redbold">this is redbold<H1>
(note that the period before the class name is not included).
There are several ways you can use style sheets. The first is simply to create your HTML documents
using the style attribute introduced in HTML 4.0. Most HTML tags now support this
attribute, and it enables you to define styles on a tag-by-tag basis. For this reason, we recommend
against using the style attribute. By applying styles within your tags, you're missing out on the
benefits of keeping your content separate from your design.
The next method is to embed the style using a style block in the
<HEAD> section of your HTML document. A style block is composed of
an opening <STYLE>
tag followed by a set of CSS rules followed by a closing </STYLE> tag.
For example:
<STYLE>
BODY { color: pink; }
H1 { font-size: 6pt; }
</STYLE>
While this method is better than applying styles on a tag-by-tag basis, it still ties the style to a particular
HTML document. We recommend using the remaining method, linking an external style sheet, to achieve
the greatest flexibility.
Linking a style sheet to an HTML document simply requires using a <LINK> tag in the
<HEAD> section of every document you wish to apply the style sheet to. For example:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Once you've linked a style sheet to your pages, any changes to that style sheet will apply to every HTML
document it's linked to. This is where the benefits of style sheets are most apparent, since you no longer
have to update every single page in order to overhaul your site's design.
Style sheets do have a downside.
Right now the biggest problem is the imperfect CSS implementations that today's
browsers offer. Even though the W3C
issued their CSS1 recommendation
way back in 1996, not every browser fully supports it. Although recent browsers
from Microsoft and (most notably) Opera Software include fairly complete CSS1 support,
older browsers - Internet Explorer 3 and Netscape 4 in particular - are not only
incomplete in their CSS support, but what they do support is often very buggy
as well.
This makes it very difficult to create style sheets that work across all browsers,
since what looks good in one browser may look awful in another. Some web authors
use JavaScript to serve up a different style sheet for each browser, but we don't
recommend this since it negates some of the reasons you'd want to use CSS in the
first place.