If you have a web site composed of many pages, styles let you change display characteristics for all of your pages by changing them once in a single file. Changing everything on a site is both easier and harder than changing everything on a page. It’s easier because you only have to add one line to each of your pages. This line will tell the browsers to load a “style sheet” when they load that page. But you do need to keep that style sheet available.
The style sheet looks exactly like what we put into our <style> and </style> tags in the preceding section. Instead of a “.html” extension, however, your style sheet file will have a “.css” extension.
If the previous styles were required across several pages on our site, we could create one file that contains:
body {
margin-left: 2em;
}
h1 {
text-align: center;
color: green;
}
h2 {
text-align: right;
border-bottom-style: dashed;
border-top-style: dashed;
color: green;
padding-right: 1em;
background-color: yellow;
}
em {
font-weight: bold;
font-style: normal;
font-variant: small-caps;
}
We place this in a file, call it “cool.css”, and place “cool.css” in some central place on our web site, usually in the same folder as our web page files.
In the “HTML Source” view, we need to place a “link” tag in the “head” of our documents, that is, somewhere between “<head>” and “</head>”.
<link rel="StyleSheet" href="cool.css" type="text/css">
Every document which includes that line will have their BODY, H1, H2, and EM tags redefined according to the style sheet. If we later change the style sheet, then every page which references the style sheet will also change. If you have a hundred pages on your web site, you can control your site’s look and feel through a single, easy to use style sheet file.
