Intermediate HTML

Lesson 1: Cascading Style Sheets

Formatting Text

There are all kinds of ways you can format text using a stylesheet. You've already seen how you can change the color, using the color property and the size, using the size property like this:

.redbig {
color: red;
font-size: 150%;
}

---

* * Notice font-size is specified here as a percentage. You can give an absolute size in ems or pixels, but the W3C official guidelines on accessibility frown on it. Makes it hard on people who have a sight disability, since it overrides the text sizing option in their browser. * *

---

Let's add some other kinds of formatting.

Font Style and Variant

You only get three choices of Font styles:

normal, italic or oblique

There's not much difference between italic and oblique (for a discussion, see page 160 in the textbook), so setting styles is pretty straightforward. Here's the specification for italicized text:

.italicspec {
font-style: italic;
}

The two choices for variant are

normal or small-caps

.capitalletters {
font-variant: small-caps;
}

Pretty easy. Let's move on.

Font Family

Go to pages 158-9 in your text. Notice how different the same text looks with different formatting. As the book explains, you can set fonts using the font-family in several ways:

• By specifying the name of the font, as in this example:



.fancyfont {
font-family: Arial;
}

• By using generic font names, like so:



.fancyfont {
font-family: sans-serif;
}

• By using the belt-and-suspenders approach of listing several fonts, which is the approach recommended by the W3C standards committee. That way, if a visitor to your site doesn't have the first font on her computer, the page will display with the first font in the list she does have
, like so:


.fancyfont {
font-family: "Enview", "Arial", "Helvetica", sans-serif;
}

• By embedding fonts from a different URL

That's probably getting more complicated than you need for most purposes. If you need to know how to do it, check out page 159 in your textbook.

Font Weight

Bolding is pretty important. I use it for a lot for things, like HREF's, for example. It's also not hard to do in a stylesheet. Here's the syntax:

.niceandfat {
font-weight: bold;
}

The other way to specify a font weight is with a multiple of 100, where 100 is very light, 400 is regular plain old normal, 700 is bold and 900 is you-don't-wanna-know.

So here are all the font specifications, together:

.nicelooking {
font-weight: bold;
font-variant: small-caps;
font-style: normal;
font-family: sans-serif;
font-size: 90%;
}

Print this page

  1  2  3  4  5