Style Sheets - Fonts

Our first font property is "the" font property, font-family. With this property you can choose what font you want to use and what back-up fonts you want if your first choice wasn't installed on your user's computer. Separate your choosen fonts with commas like this:

p { font-family: arial, helvetica, sans-serif }
.arial { font-family: arial, sans-serif }

Next on the list is font-size. The font size can be specified in several different units, but there is one major problem. Different platforms and different browsers render the sizes drastically different. To avoid this, I recommend only using "em" to size text. Here's the scoop: using "em" allows the user to change the text size through their browser while measurements like pixels (px) and points (pt) are always fixed. Pixels and points could cause problems for senior citizens with poor eyesight, they would not be able to make the text bigger through the browser like they could with "em". The size of the "em" is relative to the current size, so if you put ".8em", the resulting text would be only 80% of the original size. Here's an example of font sizing:

h2 { font-size: 1.2em; font-family: impact }
.8em { font-size: .8em }

The font-style property allows you to "slant" your text. I said "slant" because you cannot only italicize, but can also use the oblique style. The three values you can use for the font-style property are: italic, oblique and normal. Note: these options will only work if the specified style is built into the font. Here's the example:

h2 { font-family: helvetica; font-style: oblique }
.italic { font-style: italic }

Similar to font-style is font-weight. Use this property if you want to bold text. The only values worth knowing at this point are: normal and bold.

p { font-family: helvetica; font-weight: bold }
.bold { font-weight: bold }

Another handy property is text-decoration. With it, you can set these values: underline, overline, line-through, blink and none. Be warned though, if you use the blink value, you might start receiving death threats from annoyed users...

.underline { text-decoration: underline }
.overline { text-decoration: overline }
.line-through { text-decoration: line-through }

The final font property that I'm going to introduce to you is text-align. This element can be very useful, you can apply all four of the commonly used alignments in word processors: left, right, center and justify.

p { text-align: center }
h2 { text-align: right }

Use this practice area below to try out differet combinations of the properties above!

Practice

Now that you've got the font properties behind you, check out Colors/Backgrounds!

Introduction | Fonts | Color/Backgrounds | Review and Link Effects