Basic Cascading Style Sheets: Part II

In “Basic Cascading Style Sheets: Part 1,” we looked at how to add CSS to the HEAD tags of your HTML pages to style them within a single page. Now we will show how to create a separate CSS template to link to multiple pages. This allows you to make formatting changes once to update your entire site. In addition, we will review the formatting styles and how CSS affects the links on your pages.

Creating a CSS template

The CSS code shown below is placed in a separate file. Once that’s done, you can link all your HTML pages to use the formatting styles they contain. First, open Notepad and paste the following into an empty file:

.subheading
{
COLOR:blue;
FONT-FAMILY:Arial;
FONT-SIZE:13px;
FONT-WEIGHT:bold;
}

Now save the file as a CSS file. Go to file menu, select Save as, and save the file as template.css. Make sure you select All files in which Save as Drop-down menu, otherwise it can be saved as a .txt (text) file, not as CSS.

Close this document. You have now created a CSS template with an element called .subheading.

Note that the code is identical to what was put into the HEAD tags last month, except that we omitted the open and close STYLE commands. Since we used the .css extension, the computer already knows that this is the style type used.

Linking a template to HTML pages

In the HEAD part of your HTML page (where you inserted CSS script last month), add this line of code:

This tells the page to look for the template.css file we just created. This line of code needs to be placed in the HEAD of any HTML document that should reference the CSS settings. This achieves the same result as injecting the CSS script directly into the HTML page. Consequently, call up your settings as before.

For example: subtitle text

Figure 1 shows how it all comes together.

Using CSS

CSS settings are not limited to use within the FONT command. If you set up a CSS class as ‘TD.subheading’ it would ONLY work in the instance of a TD (e.g.:

Figure 1 shows the implementation within the paragraph command.

Links and CSS

Links are treated slightly differently than default class settings. If you have a link, code it exactly as you would without CSS.

For example: click here.

Once the computer reads the ‘a’ (anchor) command, it automatically recognizes the three states of links – normal, visited, and hover – and treats them according to the CSS style you specify.

For illustration, if you were to add the following definitions to your CSS template, normal links would be red, verdana, ununderlined, and in the specified font size. Links hovered over or already clicked would be blue and underlined.

A:link
{
color:red;
font-family:Verdana;
text-decoration:none;
font-size:10.8px;
}
A:visited,A:hover
{
color:blue;
font-family:Verdana;
text-decoration:underline;
FONT-SIZE:10.8px;
}

With the information covered in this series, you are now ready to successfully implement CSS to affect every page on your website.

See more new articles in category: GUIDES