Stylesheets Tutorial - Part 2

by Steve Mulder
These lesson is devoted to fonts: calling them by name, controlling text size, specifying all manner of bolds and italics, and adding special effects. Think you can do all these things with existing HTML tags? Well, you can't. Keep reading.
The CSS properties covered today include: Let's get started.

Calling Fonts by Name

First things first: How do you tell the Web browser which font to display? Just type the name of the font after font-family, right?
Unfortunately, it's a little more complicated than that. Fonts are not always called the same thing across platforms. For example, "Courier" on a Mac is often called "Courier New" on a Windows machine. And whereas one machine might have an "Italic" variant of a font, another might call it "Oblique." The more you look, the more inconsistencies you'll find. On top of that, our name for a font isn't necessarily the same as the computer's name for the font. And you have to make sure you use the computer's name for the font. For example, "Brush Script" is actually "Brush Script MT." How do you find out what the computer's name for the font is? It depends on the platform: font-family
font-family is the CSS property used to call a font by name. The basic syntax looks like this:
H1 { font-family: helvetica, impact, sans-serif }
Here's how a Web browser interprets this stylesheet rule: Look at the first font name on the list (helvetica). If a font with that name is installed on this computer, use it. If not, move on to the second font named. If impact also isn't installed, then move on to the third font specified. A value of sans-serif is a last-resort value that tells the browser to use whatever its default sans-serif font is (probably Arial).
Here is what the browser you're currently using displays:

CSS font control is peachy.


You can put as many font names in your list as you want. This can be very helpful if you're not exactly sure how a font is spelled on a different platform. List both spellings. Note that browsers seem to prefer all-lowercase spellings for font names, although sometimes they will recognize capitalized names. As long as you test everything thoroughly, you should be fine (that seems to be the CSS mantra). It's a good idea to always use a generic font name as the last on your list. Your options: (Note: Netscape Communicator doesn't support cursive or fantasy.)

More font name tips:

There you have it. With the font-family property, you can start calling fonts by name and with more flexibility than by using the <FONT FACE> tag.

Next up: more ways to size text than you could possibly imagine.

The Ultimate Control over Text Size
Frustrated by the fact that you can only size text to seven different sizes using <FONT SIZE=x>? Then you're gonna looove this page.
font-size
Using the font-size property, you have magical control over the size of text with an infinite number of font sizes at your disposal. Three basic ways to specify the size of text are:

Points, Ems, Pixels, and Other Units
Stylesheets recognize many different kinds of units that you can use for specifying the size of an element. Let's look at each one in turn. First, points: This code tells the browser to display <P> text at a size of 16 points. Point size is a unit familiar to print designers and refers to an imaginary "box" that extends from the bottom of a descender (as in "p") to the top of an ascender (as in "d").
Points are an excellent unit to use for specifying text size because it works well across browsers and platforms. The only thing you should be aware of is that, by default, fonts appear larger on a PC monitor than on a Mac monitor. (If this is a big problem, then you can always use JavaScript to detect which platform a person is using and then link to a different CSS file depending on the platform. Learn how.)
Points, like all other units, work as small or as big as you want (that was 8 points and 80 points, respectively). The preceding sentence was written using the CSS font-size property.
Next unit, em: An em is a unit of distance equal to the point size of a font. When used in stylesheets, an em refers to the size of the parent element. Thus, in the example above, any <B> text within <P> would be 30 points. (The text is one and a half times that of its parent.)

Unfortunately, em isn't supported well in the browsers, so for now you're better off sticking with points.

And now, pixels:

You can also present font sizes in pixels, as shown above. From a Web design point of view, the pixel is a familiar unit, and relatively predictable. In fact, the best thing about using the pixel unit is that text sizes are very similar across platforms when you use it (with any other unit, PC text appears bigger than Mac text).

However, there is a price. When you use pixels, your Web pages will not print consistently. Sometimes they won't print at all, and sometimes they'll print with ultra-tiny text. Points is still the more flexible unit.

other units: If these three don't give you what you want you, try one of these units:

Keywords

If you don't like using those units, you can also declare text size through keywords, like so:

There are seven keywords, and they correspond to the numerical values we're used to seeing with <FONT SIZE>: With these values, the Web browser is free to decide what exact font size is appropriate for each keyword. For example, x-large is displayed at 28 points in Netscape Communicator (Windows and Mac), 24 points in IE 4 (Windows and Mac), and 18 points in IE 3 for Windows 95.

You can also use two relative keywords:

A value of smaller tells the browser to adjust the size of the current text "down a notch" on the keyword scale. For example, if large text has smaller applied, it will then be medium size. larger works similarly.

(Note: IE 3 doesn't support smaller or larger.)

Percentage Values

A third way to specify text size is through percentage values. An example:

These rules translate as follows: Make all <B> text within <P> three times as large, or 45 points. Percentage values are always based on some inherited value from a parent element.

The browsers are a little buggy with percentage values, so test often.

Isn't choice delightful?! We finally have the freedom to play all we want to with text size, thanks to the font-size property. The range at our disposal is wondrous, as you can see below. (Each letter "i" is 5 pt bigger than the one before it; we start at 5 pt and end at 100 pt.)
i i i i i i i i i i i i i i i i i i i i

Try doing that with HTML!
And we get some of the same flexibility with bold and italics. Check it out.
All Manner of Bold and Italics
Applying italics through CSS is fairly straightforward, but we get all kinds of options for bold. Let's take a look.
font-style
font-style is the property you need to control italics, and it's nice and simple:

When a browser is told to make something italic, it will look for an "Italic" version of the font installed on the user's machine. If there is no such italic font, then the browser will make one up. Usually, this just means giving extra slant to the normal version of the font. If a font has a version named "Oblique" instead of "Italic," then use oblique as the value of font-style.
A third value for font-style is normal, which will "undo" any italicizing and make the font appear as normal (non-italicized) text.
font-weight
Bold is just something you can turn on or off, right? Not anymore. With the font-weight property, a whole new range of boldness becomes possible. Shown here is the most obvious use of font-weight. A value of bold works just like you would expect. Similarly, a value of normal will make any bold text non-bold.
But you can also specify font-weight using numerical values: 100, 200, ... 900. Normal non-bold text has a value of 400. Each larger number is at least as bold as the one below it, with 900 being the most bold version of the font available.
The Web browser decides how each number actually displays. For a font with only a normal and a bold face, 100-600 might display as normal, and 700-900 as bold. For a font with nine different weights built in, each number can be displayed differently.

These examples will work only if you have the font on your system and your browser supports CSS:

Of course, this range of numbers is valuable only if you're using a font that has a range of bold values built into it (and only if your users have the same font!). And be forewarned that browsers don't support these numerical values consistently (and IE 3 doesn't support them at all).

Finally, you can also use values of lighter or bolder for font-weight. These work only if you're using them on an element that already has some level of bold specified. For example, if you apply bolder to an element that is already inheriting boldness from a parent element, then the browser will attempt to make the text even more bold. If there is no bolder version of the font, then the browser can't do anything, so it displays the text at the same boldness level as the parent.

(Note: Neither IE 3 nor Netscape Communicator supports lighter or bolder.)

Impressed by the range of options? I think you'll like the next collection of special effects.

Special Effects with Text
Welcome to the "miscellaneous" area of our font discussion. Here you'll find other font-related stylesheets properties that are perfect to add to your toolbox.

font-variant

font-variant is a simple one: you use it to display normal text as small caps.

Unfortunately, no version of Communicator or Internet Explorer currently supports this property. IE 4 comes close, but it capitalizes everything equally, resulting in all the letters having the same height - which isn't exactly what small caps should look like.

It seemed worth mentioning anyway, in the event that the 5.0 browsers will support it.

text-transform

This property is somewhat related, and it actually works! With text-transform, you can control capitalization easily. The basic code:

  • uppercase makes every single character capitalized. This sentence serves as an example.

  • lowercase makes none of the characters capitalized. This sentence serves as an example.

  • capitalize makes the first character of every word capitalized. This sentence serves as an example.

  • none means that any inherited text-transform value will be ignored, and the text will display normally. This sentence serves as an example. (Note: IE 3 doesn't support text-transform.)

    text-decoration

    For decades (well, it feels like that long anyway), we've had no control over the fact that text links are underlined in Web browsers. I don't know about you, but I think it's ugly and annoying. Ladies and gentlemen, I give you a solution: text-decoration.

    First things first. Here's the basic syntax for this property:

      B { text-decoration: underline }
    Most of the options make text less readable:
    • underline makes the text, um, underlined. Check out these words.

    • overline adds a line above the text. Check out these words.

    • line-through puts a line through the text (i.e., strikethrough). Check out these words.

    • blink is your basic, familiar nightmare. Text blinks. Check out these words.

    • none makes sure none of the above happens.
    (Note: Communicator doesn't support overline. IE 4 doesn't support blink. IE 3 doesn't support either of those values.)
    The none value is magical. With it, you can make text links not underlined. Here's how:
      A:link {font-family: "Arial"; font-size: 10pt; color: 008080; font-weight: bold; text-decoration: none}
      A:visited {font-family: "Arial"; font-size: 10pt; color: 336633; font-weight: bold; text-decoration: none}
      A:active {font-family: "Arial"; font-size: 10pt; color: 008080; font-weight: bold; text-decoration: none}
      A:hover {font-family: "Arial"; font-size: 10pt; color: FF0000; font-weight: bold}
    Think of these as predefined classes for the <A> tag. A:link is for normal, unvisited links, A:active is for link appearance while you're clicking, and A:visited is for previously visited links. The lines above would go in your embedded, linked, or imported stylesheet, and your HTML link code wouldn't change at all:

    <A HREF="http://www.shopwa.com.au/">Link</A>
    And here's the result:

    and when you get your mouse over it - woow - it changes colour - thats the a:hover tag
    But wait, there's more! Not only can you remove underlining from links, but you can also use any other CSS property on them using A:link, A:active, and A:visited as you can see above. So, you can make unvisited links bold 12-point Arial and visited links italicized 10-point Times. The world is your oyster.
    OK, OK, not all browsers support this heavenly feature set. Communicator supports these predefined classes with text-decoration, but is very buggy with other properties. IE 3 doesn't support A:active (and the Mac version doesn't support A:visited). IE 4 does the best job, supporting just about everything. Despite these limitations, you have many opportunities that were never before possible! All hail the makers of CSS.... do you hink you've mastered the world of CSS and fonts? How about a quick exercise.

    Day 2 Exercise

    Here's a quick exercise that will help you try out some of the cascading stylesheets properties covered in this part. Your mission: to duplicate this stylesheets example page using only HTML and stylesheets, remember, you must have a 4.0 browser for the examples to work correctly. Try to exactly match this page without viewing the code. When you're finished, check out the code behind the page. Did you use the same techniques, or did you discover different ways of accomplishing the same thing? With stylesheets, as with HTML, you can sometimes choose from multiple ways to achieve the same result.

    Review of Part 2

    In this lesson we cavorted in the land of fonts: font faces, sizes, boldness, italics, capitalization, underlining, and so on. Sure, a lot of these things you can do with traditional HTML tags - but not everything, and certainly not with the level of control that you can achieve through stylesheets.
    The cascading stylesheets properties now in our arsenal:
    • font-family defines which font will display.
    • font-size enables you to control text size using points, pixels, keywords, and other units.
    • font-style designates italics.
    • font-weight provides complete control over all the levels of boldness available.
    • font-variant rules small caps.
    • text-transform controls capitalization.
    • text-decoration is the miscellaneous text property in charge of underlining, blink, and so on.
    We need to mention one more property here: font. The font property is a kind of shorthand for a few of the other properties. It's a way of assigning font-size, line-height, and font-family all at once. Here's an example:
    LI { font: 12pt/16pt courier }
    This one rule defines <LI> text as 12 points in size, 16 points in line height (we'll talk about this property tomorrow), and in the Courier typeface.

    If you use font, you must always set the font size and font face, but the line height is optional. Make sure the values are in the exact order you see above.

    This is just the beginning of our exploration of the many CSS properties, in PART 3 we expand on these font properties and look at typography and layout.
    • Steve Mulder is a Senior Consultant at TSDesign, and author of Web Designer's Guide to Style Sheets. He wishes he could wallpaper his dining room using <BODY BACKGROUND>. Unfortunately, it would probably dither.