CSS Properties
CSS Properties
Page 2
Font Properties
If you've read the CSS Properties section of A Beginners Guide to CSS, some of the following page may be repetitious to you. You will however find that the examples are different here.
font-size
Font sizes can be specified in a number of ways, and via a number of different units. While you can use in (inches), cm (centimeters), or mm (milliimeters), these are not very good measures for an online format. If you must use an absolute size, I recommend pt (points). Another absolute unit - "picas" - also exists. 1 pica = 12 points. What's the point of using picas? Not sure.
Relative length units specify a length relative to one of its parents. Thus, if you tag the body element as font-size: 12pt, and then tag a paragraph within it as font-size: 50%, then that paragraph should appear in a 6pt font size.
Other than percentages, other relative units are em, ex, and px. EX's are nearly never used and will not be covered here. EM's are a frequently used, albeit mysterious measure. This unit traces its origins back to the "em box", as used in print typography. Generally speaking, a font shown at 1 em will display as if no adjustments have been made. You may use decimal values such as .8 em or 1.2 em, and experiment until you find the size you like - just keep in mind that any changes to the font-size of a parent element will change the font sizes of any relative units within it.
Although sizing fonts by pixel may seem to be a absolute measure, it is considered relative because of the variety of monitors used by those viewing the site. Someone browsing your site from a cell phone will have a different pixel density than someone at home with a 19 inch monitor.
Lastly, font sizes may be declared using keywords. Valid keywords are xx-small, x-small, small, medium, large, x-large, and xx-large. These are defined differently by different browsers, but the difference should be minimal.
Example
CSS
body {font-size: 10pt;}
h1 {font-size:1.6em;}
h2 {font-size:1.4em;}
.small {font-size:0.8em;}
Markup
<body>
<h1>The Poopsmith</h1>
<h2>Faithful Servant to the King of Town</h2>
<p>Here we have a rare glimpse of the poopsmith in his natural habitat - <i>pretty nasty if you ask me!</i></p>
<p>The poopsmith has taken a vow of silence... <span class="small">I'm about to take a vow of... throwing up my cookies!</span></p>
</body>
Display
font-family
Unlike many other CSS properties, the font-family property accepts multiple values. Obviously a block of text can only be shown in one font - the later values are provided in case the person viewing the text doesn't have your first choice font installed. So you may decide that your page looks great in 11 point Tahoma. But since not everyone will have the Tahoma font installed, you may choose arial as a fallback. Also, it is encouraged to provide a generic alternative as a last resort. Generic font families are serif, sans-serif, monospace, cursive, and fantasy. Although you can choose to provide only one font, it's generally not the best option.
The multiple fonts must be separated with commas, and if you choose a font with multiple words, you must enclose it in quotes so that the separate words aren't interpreted as separate font names. Spacing outside the quotes is unimportant.
Example
CSS
body {font-family: geneva, arial, sans-serif;}
h1 {font-family: 'times new roman', times, serif;}
.fancy {font-family: 'monotype corsiva', cursive;}
Markup
<body>
<h1>Which one of the Backstreet Boys are you?</h1>
<p>Take <a href="stupidquizzes/bsbtest.html" class="fancy">this test</a> to find out which one of the Backstreet Boys you are!!!1</p>
</body>
Display
As you can see, links in cursive fonts are frightening.
font-weight
A font's weight is a measure of its boldness. Valid values are bold and normal. Alternatively, you may specify a numeric value from 100 to 900. Theoretically, you could use any number, such as 442, but it's usually difficult to see the difference between 400 and 500, so there's no reason to use values that aren't multiples of 100.
Example
CSS
li {font-weight:bold;}
Markup
<body>
<p>Things I hate about Bob</p>
<ul>
<li>Hairy armpits</li>
<li>Smelly feet</li>
<li>Saggy Butt</li>
</ul>
</body>
Display
Things I hate about Bob
- Hairy armpits
- Smelly feet
- Saggy Butt
font-variant
The font-variant property lets you change your font to something called small-caps. The capitalized letters within a small-caps block will be larger, but all letters will be capitalized.
Example
CSS
.sc {font-variant:small-caps;}
Markup
<body>
<h1>French's Introduces Antibacterial Mustard</h1>
<p><span class="sc">Rochester, NY</span> - In response to increasing American demand for tangier, more hygienic meals, condiment giant French's has introduced a new antibacterial mustard.</p>
</body>
Display
font-style
The font-style property indicates whether the text should be displayed in normal, oblique, or italic text. Oblique text is similar to italic in that the face is slanted, but it is not a true italic, as it lacks script.
Example
CSS
.norm {font-style:normal;}
.i {font-style:italic;}
.obl {font-style:oblique;}
Markup
<body>
<p class="norm">This is normal text - we didn't even need a special class to style it this way unless it has a parent styled as italic or oblique.</p>
<p class="i">This is italic text - the same you'd get if you used an <i> or an <em> tag.</p>
<p class="obl">This is oblique text - seldom used, but somewhat attractive. Like me.</p>
</body>
Display
That's it for font properties. Now let's take a look at the remainder of properties that have to do with text.