Using Style Sheets To Replace The Font Tag

In the last issue of DesignNewz, we covered the basics of cascading style sheets, their hierarchy, and how to reference them in HTML. In this issue we will go more in depth on style sheets, focusing primarily on the the basics of syntax.

We can use style sheets to format a number of the properties of a page, but a complete look at all of these would be beyond the scope of one issue, so let’s look at the use of styles to format text.

Let’s say that we have a page that will have three distinct types of text. Let’s call these headline, article, and footer.

We need all of these fonts to be verdana. The headline text needs to be centered, bold, verdana, blue, and 14 pixels in size. The article text will need to be justified, verdana, black and 12 pixels in size. The footer text will be centered, bold, verdana, red and 10 pixels in size. Our external style sheet may be written several ways. One way is as follows:

.headline {
font: bold 14px verdana;
color: Blue;
text-align: center;
}

.footer {
font: bold 10px verdana;
color: rgb(0,0,255);
text-align: center;
}

There are several points to note here. One is that the selectors (.whatever) do not have to be associated with a particular tag. This means we can assign the class “headline” to a table cell, a paragraph, a span, a list, or any other tag. For example, we can assign a <td class=”headline”> and a <p class=”headline”> in the same document. Another point is that each property assigned must be separated by a semicolon.

One other point to note is that we can select colors by using names, hexadecimal values or RGB values. Here, we have also defined all of the font attributes in one line, though these can be declared separately as well. Let’s look at another format we could have used to produce the same results from this style sheet.

/* font face */
.headline, .article, .footer {font-family: verdana}

.article {text-align: justify}

As you can see here, the style sheet is more bulky, but on larger sites it is sometimes helpful to break the sheet up like this. There are a few things to notice here.

Firstly, notice how comment tags are rendered in style sheets with a /* opening and a */ closing tag.

Secondly, multiple selectors can be assigned the same property in the same line, such as in the line: .headline, .article, .footer {font-family: verdana}.

Thirdly, selectors can be assigned properties in separate declarations. The cumulative effect of these assignments are the same as those from the first style sheet.

Now let’s look at some of the more common selectors and the properties and values they can be assigned:

PROPERTYVALUES colorany name, any hex code, rgb colors text-aligncenter, justify, right, left text-decorationnone, underline, line-through font-familyany font or family of fonts font-weightnormal, bold, bolder, lighter font-sizepx, % font-stylenormal, italic font (sets all)use the values in this order, though all donot have to be included: style, weight, size, family
You can get a full reference sheet of all possible css properties and values at w3schools.com. They also have both beginner and advanced tutorials, as well as some self-tests. My advice is to dive in, experiment, and see what you can learn on your own. Your understanding will thus be deepened.

In the next issue, we will cover some of the other page properties we can format with style sheets.

Murdok provides free highly informative newsletters for web developers, IT professionals and small business owners. We deliver 50 million email newsletters per month and have over 4,000,000 unique opt-in subscribers. From our extensive range of email newsletters we can provide you with a selection of newsletters that best meet your interests.