The CSS properties covered in this lesson include: * font-family * font-size * font-weight * font-style * font-variant * text-transform * text-decoration * font
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).
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.)
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:
P { font-size: 16pt }
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.)
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:
Keywords to use for relative changing of font sizes are:
xx-small x-small small medium large x-large xx-large smaller larger
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.
Font Styles:
font-style is the property you need to control italics, and it's nice and simple:
H3 { font-style: italic }
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.Font-Variant: NOT SUPPORTED BY IE OR NETSCAPE!
Used to display font in small-caps.
H2 { font-variant: small-caps }
Text-Transform:
Controls Capitalization through different keywords.
B { text-transform: *** }
uppercase - capitalizes all letters
lowercase - opposite uppercase
capitalize - capitalizes all words in sentence
none - makes browser ignore text transform
B { text-decoration: *** }
underline - underlines text
overline - puts line over text
line-through - strikethrough of text
blink - the text blinks... (Netscape doesn't support overline, IE doesn't
support blink.)
none - makes sure that none of the above happens...
A: link {text-decoration: none}
A: active {text-decoration: none}
A: visited {text-decoration: none}
Font:
Font assigns the font-size, line-height, and font-family all at once.
LI { font: 12pt/16pt courier }
This says to make all text within <LI> 12pt size, 16pt line height (wait till chapter three) and in courier type face.
END LESSON TWO
Lesson 3