File Under: CSS, UI/UX

Mulders Stylesheets Tutorial – Lesson 2

Welcome to Lesson 2 of our tutorial on the wondrous language known as cascading stylesheets. After Lesson 1 on the basics of how to use and add stylesheets to Web pages, we can now begin exploring the individual properties that make them more than cool.

Lesson 2 is devoted to fonts: calling them by name, controlling text size, specifying all manner of bolds and italics, and adding special effects. Do you think you can do all these things with existing HTML tags? Well, you can’t.

The CSS properties covered in this lesson include:

  • font-family
  • font-size
  • font-weight
  • font-style
  • font-variant
  • text-transform
  • text-decoration
  • font


Let’s get started.

Contents

  1. Calling Fonts by Name
  2. Controlling Text Size
  3. All Manner of Bold and Italics
  4. Special Effects with Text
  5. Lesson 2 Exercise
  6. Review of Lesson 2

Calling Fonts by Name

First thing’s first: How do you tell the Web browser which font to display? You 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’re using the computer’s name. 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:

  • Windows users: Use the font name exactly as it appears in the font menu of an application, such as Microsoft Word.
  • Mac users: Don’t trust what applications tell you. Instead, open up the Fonts folder, which can be found in the Macintosh HD/Library/Fonts folder. Spell the font name in your stylesheets code the same way its file name is spelled.


font-family

font-family is the CSS property used to call a font by name. The basic syntax looks like this:

H2 { 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 that tells the browser to use whatever its default sans-serif font is (probably Arial).

Here’s how your browser would interpret the above code:

CSS font control is peachy


You can put as many font names in your list as you want. This feature can be helpful if you’re not exactly sure how a font is spelled on a different platform: Go ahead and 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:

  • serif (probably Times)
  • sans-serif (probably Arial or Helvetica)
  • cursive (probably Comic Sans)
  • fantasy (probably Ransom)
  • monospace (probably Courier)


(Note: Netscape Communicator doesn’t support cursive or fantasy.)

More font name tips:

  • If a font name consists of more than one word, such as Gill Sans, put quotes around the font name in your CSS code:

BODY { font-family: "gill sans", "new baskerville", serif }

  • For inline styles, use single quotes:

<P STYLE="font-family: 'gill sans', 'new baskerville', serif">Text goes here.</P>

  • If you’re grouping declarations and font-family is among them, make it the last one, like so:
H2 { color: red; margin: 10px; font-family: times, serif }

Sometimes Internet Explorer 3 will ignore an entire CSS rule if font-family isn’t the last property listed. It’s strange but true.

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 are more ways to size text than you could possibly imagine.

Controlling Text Size

Are you 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;
  • keywords; and
  • percentage values.


Points, Ems, Pixels, and Other Units

Stylesheets recognize many different kinds of units that you can use to specify the size of an element. Let’s look at each one in turn.


Points:

P { font-size: 16pt }

This code tells the browser to display <tt><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 (like “p”) to the top of an ascender (like “d”).

Points are an excellent unit to specify text size with because they work well across browsers and platforms. The only thing you should be aware of is that, by default, fonts appear larger on PC monitors than they do on Mac monitors.

(If this is a big problem, 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. Check [wired/webmonkey/stuff/javascript.html here] for details about platform detection.)

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. If your browser doesn’t support this property, click [stuff1a/page3.html here] to see what it looks like.

Em

P { font-size: 20pt }

B { font-size: 1.5em }

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.)

The em is also an excellent unit for text size, even though IE 3 doesn’t support it. When you use em, you can be sure that users who need to can still adjust the type size using their browser preferences (which is important for those with less-than-perfect eyesight). Also, pages that are printed will have appropriate text size.

Pixels

P { font-size: 20px } 

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 similar across platforms when you use it (with any other unit, PC text appears bigger than Mac text).

There is a price, however. 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. Also, in some browser versions, users won’t be able to adjust the font size using the browsers’ preferences. Not good. The em is the more flexible unit.

Other units

If the previous three don’t give you what you want, try one of these units:

  • in is inches
  • cm is centimeters
  • mm is millimeters
  • pc is picas
  • ex is x-height


Keywords:

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

P { font-size: large } 

There are seven keywords, and they correspond to the numerical values we’re used to seeing with <FONT SIZE>:

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large


With these values, the Web browser is free to decide which 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:

  • smaller
  • larger


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 sized. The larger attribute works similarly.

(Note: IE 3 doesn’t support the smaller or larger attributes.)

Percentage Values:

A third way to specify text size is through percentage values. Here’s an example:

P { font-size: 15pt }

B { font-size: 300% }

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 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 points 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:

H3 { font-style: italic }

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 (sometimes) 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 (nonitalicized) 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.

P { font-weight: bold } 

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 nonbold.

But you can also specify font-weight using numerical values: 100, 200, … 900. Normal, nonbold text has a value of 400. Each larger number is at least as bold as the one below it, and 900 is the most-bold version of the font available.

The Web browser decides how bold each value is. For a font with only a normal and a bold face, 100-600 might display as normal, and 700-900 might appear 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:

  • [stuff1a/bold-arial.html Arial]
  • [stuff1a/bold-verdana.html Verdana]


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 won’t do anything; it will display the text at the same boldness level as the parent.

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

Are you 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.

H2 { font-variant: small-caps } 

Unfortunately, no version of Communicator or Internet Explorer currently supports this property. IE 4 and 5 come close, but they capitalize everything equally. The result is that all the letters have the same height – which isn’t exactly what small caps should look like. But it seemed worth mentioning anyway, in the event that later browsers will support it.

text-transform

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

B { text-transform: uppercase }

Here are all the possible values and what they mean:

  • uppercase makes every single character capitalized. This sentence serves as an example.
  • lowercase makes all of the characters lowercased. 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.)

If your browser isn’t illustrating the above examples, click [stuff1a/page5a.html here] to see what they look like.

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 thing’s 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., strike through). Check out these words.
  • blink is your basic, familiar nightmare. The text blinks. Check out these words.
  • none makes sure none of the above happens.

(Note: Communicator doesn’t support overline. IE 4 and 5 don’t support blink. IE 3 doesn’t support either of those values.)

If your browser doesn’t support these CSS properties, click [stuff1a/page5b.html here] to see what they look like.

The none value is magical. With it, you can remove the line under text links. Here’s how:

A:link { text-decoration: none }

A:active { text-decoration: none }

A:visited { text-decoration: none }

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.webmonkey.com/">This text is a link, but it's not underlined!</A>

And here’s the result:

This text is a link, but it’s not underlined!

But wait, there’s more! Not only can you remove underlining from links, you can also use any other CSS property on them using A:link, A:active, and A:visited. So, you can make unvisited links 12-point bolded Arial and visited links 10-point italicized 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 and 5 do 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 think you’ve mastered the world of CSS and fonts? How about a quick exercise?

Lesson 2 Exercise

Here’s a quick exercise that will help you try out some of the cascading stylesheets properties we’ve covered in this lesson. Your mission is to duplicate [stuff1a/2-exercise.html this stylesheets example page] using only HTML and stylesheets. Remember, you must have at least a 4.0 browser for the examples to work correctly.

Try to match this page exactly 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.

Now let’s do a quick review of what we’ve covered in Lesson 2.

Review of Lesson 2

In this lesson, we cavorted in the land of fonts: font faces, sizes, boldness, italics, capitalization, underlining, and so on. Sure, you can do a lot of these things with traditional HTML tags – but not all of them, and certainly not with the level of control that you can achieve through stylesheets.

The cascading stylesheets properties now in our arsenal follow:

  • font-family defines which font will display.
  • font-size lets you 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 in Lesson 3), 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. Check out Lesson 3: We expand on these font properties and look at typography and layout.