The Slacker's Guide to Cascading Style Sheets

The font specification is used to specify the family (face), generic or not, of the font, the size, the weight, the variant, and the style of certain text. Properties, as you probably don't remember from the Introduction, are one half of the declaration. The declaration is the part of the style that says what's happening to what. This is the half of the declaration that says what will be changed, but not what it will be changed to. For more on that, head back to the intro.

Font-family

Font-family is used to define what 'face' the font will take on instead of the default font face, which in most cases is Times New Roman, or Times. When writing a style to define font-family it is good practice to always use three (or more) different font choices for the visitors browser to choose from. I'll explain why now.
Let's assume that you want your page to be in the font 'Reznor', which is a font quite similiar to Arial. Most computers will not have Reznor stored on them and therefore most browsers will not be able to handle that request. Simple enough. So, in order to stop the browser from then displaying Times, it's default font, since it can't handle Reznor, you give it a backup. Arial, which is similiar, should be the likely candidate. So we'll now assume that you want to use Arial as the backup font. Let's even go further and assume that this browser is quite old and obselete, but you still want the visitor to get at least a similiar font. You then specify a generic font-family. The generic font families are listed below.


serif (ex. Times)

sans-serif (ex. Arial)

cursive (ex. "Brush Script")

fantasy (ex. Braggadocio)

monospace (ex. Courier)

So, the style would resemble the example below if you wanted Reznor as your first choice, Arial as a backup, and sans-serif as a last-ditch effort:


p {font-family: Reznor, 
Arial, sans-serif}

And, as always, you can use other HTML tags to define which text will be affected. If you had written this:


b {font-family: Reznor, 
Arial, sans-serif}

...then all text enclosed within the bold (b) tag would be affected.
Also, as a side note, whenever you are writing styles for fonts that are made up of more than one word (ex. courier new), then enclose it in quotation marks. Example:


pre {font-family: "courier new"}

That covers the topic of font-family.

Font-style

The font-style property is used to specify whether a font will appear as normal, italic, or oblique. You specify these properties just the same as you would specify the font-family properties, like so:


p {font-style: italic}

And in this case all text enclosed within the paragraph (p) tag will appear as italic. Also, like font-family (and most styles), you can interchange the preceding HTML tags to your heart's content:


body {font-style: oblique}

In the above scenario, all text within the body of the document would appear as italic.

Font-variant

The font-variant property is used to denote whether a font will or will not appear in all small-caps or as normal caps. Normal caps, which means the cap sizes change as you want them to, and is the default setting, is suggested. Small-caps will block out capitals and make them into all small case letters. You would write this style like so:


address {font-variant: 
small-caps}

This would give all text within the address tag small-caps. Quite self-explanatory.

Font-weight

Font-weight is the designation of weight to a font. Bold is an example of font-weight, and font-weight can be measured both absolutely and relatively. Measuring the weight of a font absolutely means that you are using an absolute (unchanging) command to signify the weight. Bold is unchanging, or absolute, because bold will always be bold. No matter what the previous weight was the new weight will be bold. Relative sizes include the following:

Bolder Lighter

The absolute weights are as follows:

Normal Bold 100-900

Here is an example of a few font-weight styles:


i {font-weight: bolder}
xmp {font-weight: normal}
listing {font-weight: 900}

In this example, all italic text would be one weight bolder than the previous text, all text within example (xmp) tags would be normal, and all text within listing tags would be very thick (a boldness setting of 900 out of 900. On this scale 100 is very light, 400 is normal, and 900 is boldest. Most browsers do not handle this scale well and will round off 500 to 400 and 700 to 900, etc.).

Font-size

Font-size, like font-weight, can be measured both absolutely and relatively. First we will review the relative ways to program font sizes.

Relative Sizes

Percentage:

You can use percentage to signify new font sizes quite easily. It's much easier to use this method than by using point sizes, especially if you don't know how to use point sizes (pt) or pixel (px) sizes to denote the default font size. If you want to make something twice as big and you don't know the default pixel size, then you can't double the default pixel size. What you can do, though, is simply write this:


big {font-size: 200%}

That way you can keep all the font sizes relative to the preceding fonts. If you had this HTML written out...


I like American music.
Do you like American music?
I like American music...
<big>baaaby</big>.

..then the word 'baaaby' would be twice as big as the rest of the words inside the paragraph (p) element.

Larger or Smaller:

You can use 'larger' or 'smaller' as properties, too. Using either of these two keywords will make the present text one size smaller, just as the 'big' and 'small' tags do in HTML. Look at this example:


<html>

<head>

<style type=text/css>

<!--

s {font-size: larger}

-->

</head>

<body>

<s>larger</s>

not larger

</body>

</html>

The word larger is larger than the other words.

In this example you can see two things:
A) The head tag includes the style information for the page.
B) The words enclosed in the strikethrough (s) tag are larger. Here is the results:

The word ~~larger~~ is ~~larger~~ than the other words.

Absolute Sizes

Point and Pixel Sizes:

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

Each of those keywords, when used, will change the text to just what it says, xx-small to xx-large. Trust me, the xx-small keyword DOES make extra, extra small text, and the xx-large keyword produces some extra, extra large text. You would implement this like so:


i {font-size: x-large}

That code would obviosly be inside the style tag which should be inside the head tag. Using that example, all italic text would also appear extra large.

Point and Pixel Sizes:

Unless you know point and pixel sizes well, I don't suggest using this. You would designate point sizes using the pt suffix and the pixel size using the px suffix. I don't know what equals the default font size in pixels, but I do know that 10 to 12 points is the accepted default font size in point. Here is an example of making all bold text sligntly larger than normal:


b {font-size: 15pt}

Got it?

Font

The font style is used to list a multiple of styles to apply to a single tag (or, of course, multiple tags). It 'runs' like so:


p { font: italic bold 
12pt/15pt Times, serif }

This example specifies for 'p' to be a bold and italic font with a point size of 12 points and a line hieght of 15 points. 'P' is also either Times or any serif font.