So far, we’ve used styles only at their most basic level: changing one item at a time. But if you want to give your site a consistent look and feel, styles can help you out. You can change all level 2 headings, for example, to be aligned right without going to each level 2 heading.
You can make global changes to all tags on one page, or to all tags on a collection of pages. In each case, you will need to be in “HTML Source” mode.
The changes that we are making go into the head of the document. They must go between <head> and </head>. I recommend putting them just before the </head>.
Go to HTML Source view and put <STYLE> and </STYLE> just before </HEAD>. Put them on two separate lines.
First, let’s change our H1 heading to be centered and green. Place the following text between the <STYLE> and </STYLE> tags:
H1 {
text-align: center;
color: green;
}
Now, let’s tackle those H2 artist headlines. Place the following between your <STYLE> and </STYLE> tags:
H2 {
text-align: right;
border-bottom-style: dashed;
border-top-style: dashed;
color: green;
padding-right: 1em;
background-color: yellow;
}
This should make your level one headings appear in green text on a yellow background, with a dashed line on the top and bottom. If you want to change the color, or the dash, or the alignment, or add further stylistic embellishment to your headings, you can change it in the <STYLE> area. It will automatically change every incarnation of that tag on the rest of the page.
You can also change character-level tags, such as the emphasis tags. Get into Normal view and emphasize some words and phrases using “Text Style” and then “Emphasis” under the “Format” menu. Your emphasized text should be displayed in italics. Then, go back to HTML Source view and add these lines to your <STYLE> area:
EM {
font-weight: bold;
font-style: normal;
font-variant: small-caps;
}
This will change each emphasized word from the default display of italic to small-caps and bold. The words are still emphasized, but the display is changed. If you later decide to display emphasized text in a different manner, you can change the style once, and it will automatically apply to all emphasized text on the page.
Go ahead and play around with the three styles you’ve just added. Change H2 to center, for example (and then easily change it back if you decide you prefer right-aligned level 2 headlines). See if you can put a border around your emphasized text, and decide what looks better.
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.
The HTML Source view in Netscape Composer lets you change styles only if you already know the style names and values to type. If you want to make easier use of styles in a style sheet for your page or site, you can install a style sheet editor directly into Netscape Composer. Go to http://daniel.glazman.free.fr/composer/cascades02.htm and install the latest version of CaScadeS. The link will install it directly into Netscape Composer, so you’ll need to visit the page using Netscape’s browser.