Choose a font that makes your text eye-catching (especially if it’s a headline) and readable (especially if it’s main body text), as discussed in the figure on the previous page. Unfortunately, you can’t use just any font you want. Well, actually you can use any font you want, but it won’t show up on a viewer’s computer unless she’s installed the same font on her system. So that handcrafted font you purchased from the small font boutique in Nome Alaska won’t do you any good on the Web—unless each person viewing your site has also bought and installed that font. Otherwise, your visitors’ web browsers will show your text in a default font, which is usually some version of Times.

One solution is to specify the font you’d like to use, as well as a couple of back-up choices. If your viewer’s computer has your first-choice font, then that’s what she’ll see. But when the first font isn’t installed, the browser looks down the list until it finds a font that is. The idea is to specify a list of similar-looking fonts that are common to a variety of operating systems, like so:

font-family: Arial, Helvetica, sans-serif;

In this example, a web browser first looks to see if the Arial font is installed; if it is, then that font is used; if not, the browser next looks for Helvetica, and if that isn’t installed, then it finally settles for a generic font—sans-serif. When you list a generic font type (like sans-serif or serif), the viewer’s browser gets to choose the actual font. But at least you can define its basic character.

Also, if the font’s name is made up of more than one word, you must enclose it in quote marks:

font-family: "Times New Roman", Times, serif;

Here are some commonly used combinations organized by the type of font, including a generic font type at the end of each list.

Serif fonts

Serif fonts are best for long passages of text, as it’s widely believed that the serifs—those tiny “feet” at the end of a letter’s main strokes—gently lead the eye from letter to letter, making text easier to read. Examples of serif fonts are Times, Times New Roman, Georgia, and the font in the main body paragraphs of this book.

• “Times New Roman”, Times, serif

• Georgia, “Times New Roman”, Times, serif

• Baskerville, “Palatino Linotype”, Times, serif

• “Hoefler Text”, Garamond, Times, serif

Examples of these fonts are in Figure 6-2.

Figure 6-2. Fonts don’t always display the same on Windows (left) and Macs (right). The two systems come with different built-in fonts. In addition, anti-aliasing, which makes onscreen text look smoother, is better on the Mac than on Windows. If you’re on Windows and want better looking type on your own computer, you can turn on Microsoft’s Clear Type technology: www.microsoft.com/typography/cleartype.

Sans-serif fonts

Sans-serif fonts are often used for headlines, thanks to their clean and simple appearance. Examples of sans-serif fonts include Arial, Helvetica, Verdana, and Formata, which you can see in the gray boxes in this book.

• Arial, Helvetica, sans-serif

• Verdana, Arial, Helvetica, sans-serif

• Geneva, Arial, Helvetica, sans-serif

• Tahoma, “Lucida Grande”, Arial, sans-serif

• “Trebuchet MS”, Arial, Helvetica, sans-serif

• “Century Gothic”, “Gill Sans”, Arial, sans-serif

Examples of these sans-serif fonts are in Figure 6-3.

Figure 6-3. Windows (left) and Mac (right). Some people believe that you should use only sans-serif fonts on web pages because they think the delicate decorative strokes of serif fonts don’t display well on the coarse resolution of a computer screen. In the end, your aesthetic judgment is your best guide. Pick the types of fonts you think look best.

Additional fonts to consider

There are literally thousands of fonts, and every operating system ships with many more fonts than are listed here. However, here are a few fonts that are very common on both Macs and PCs, so you might want to give them a go:

• Arial Black

• Arial Narrow

• Impact

Figure 6-4. Windows (left) and Mac (right). Courier is the most common monospaced font, but you’re far from limited to it. Lucida Console is very common on Windows and Macs, and Monaco is installed on every Mac.

Be careful with Arial Black and Impact: They only have a single weight and don’t include an italic version. Accordingly, if you use these fonts make sure to set the font-weight and the font-style (coming up on Capitalizing) to normal. Otherwise, if the text is bolded or italicized, the browser will make its best (read: ugly) guess at what the text should look like.

Tip

You can find a lot more information on which fonts are installed on which systems, including Macs, Windows, and Linux, at www.codestyle.org/css/font-family. For another good resource for thinking outside the normal set of web fonts, visit http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks.

Black-and-white is great for Casablanca and Woody Allen films, but when it comes to text, a nice skyline blue looks much sharper and classier than drab black. Coloring your text with CSS is easy. In fact, you’ve used the color property in a few tutorials already. You have several different ways to define the exact color you want, but they all follow the same basic structure. You type color: followed by a color value:

color: #3E8988;

In this example, the color value is a hexadecimal number indicating a muted shade of teal (more in a moment on what hexadecimal is).

Every graphics program from Fireworks to Photoshop to the GIMP lets you select a color using hexadecimal or RGB values. Also, the color pickers built into Windows and Macs let you use a color wheel or palette to select the perfect color and translate it into a hexadecimal or RGB value.

color: rgb(100%,100%,100%);

color: rgb(255,255,255);

Varying pixel values are the easiest to understand, since they’re completely independent from any browser settings. When you specify, for example, a 36-pixel font size for an <h1> tag, the web browser displays text that’s 36 pixels tall, period. Web designers cherish pixel values because they provide consistent text sizes across different types of computers and browsers. (Well, not all web designers. See the box below for one limitation of pixel sizing.)

To set a pixel value for the font-size property, type a number followed by the abbreviation px:

font-size: 36px;

Three ways of sizing text with CSS—keywords, percentages, and ems—work by either adding to or subtracting from the text size already on the viewer’s browser screen. In other words, if you don’t specify a text size using CSS, a web browser falls back on its pre-programmed settings. In most browsers, text inside a non-header tag is displayed 16 pixels tall—that’s called the base text size.

Web surfers can adjust their browsers by pumping up or dropping down that base size. In Internet Explorer, for example, you can choose View → Text Size and select an option such as Larger or Smaller to adjust the text size on the screen; in Firefox 2, it’s View → Text Size → Increase (or Decrease); in Firefox 3, it’s View → Zoom; and in Safari the menu options are View → Make Text Smaller and View → Make Text Bigger.

When you resize text with CSS, the browser takes the base text size (whether it’s the original 16 pixels or some other size the viewer ordered) and adjusts it up or down according to your keyword, em, or percentage value.

font-size: large;

Percentages

Like keywords, percentage values adjust text in relationship to the font size defined by the browser, but they give you much finer control than just large, x-large, and so on. Every browser has a pre-programmed base text size, which in most browsers is 16 pixels. You can adjust this base size in your browser’s preferences. Whatever setting has been chosen, the base text size for a particular browser is equivalent to 100 percent. In other words, for most browsers, setting the CSS percentage to 100 percent is the same as setting it to 16 pixels.

Say you want to make a particular headline appear two times the size of average text on a page. You simply set the font size to 200 percent, like so:

font-size: 200%;

Or, when you want the text to be slightly smaller than the default size, use a value like 90 percent to shrink the font size down a bit.

The above examples are pretty straightforward, but here’s where it gets a little tricky: Font size is an inherited property (see Chapter 4), meaning that any tags inside of a tag that has a font size specified inherit that font size. So the exact size of 100 percent can change if a tag inherits a font-size value.

For example, at the lower left of Figure 6-5, there’s a <div> tag that has its font size set to 200 percent. That’s two times the browser’s base text size, or 32 pixels. All tags inside that <div> inherit that text size and use it as the basis for calculating their text sizes. In other words, for tags inside that <div>, 100 percent is 32 pixels. So the <h1> tag inside the <div> that has a font size of 100 percent displays at two times the base-text size for the page, or 32 pixels.

Figure 6-5. The three most common units for sizing text: pixels, ems, and percentages. Watch out for inherited text sizes when using ems or percentages, as explained on the opposite page. If you notice that some text on a page looks unusually large or small, then check to see if the offending text isn’t inside a tag that inherits a font size from another tag.

font-size: 2em;

Web browsers display type inside the <em> and <i> tags in italicized type and text inside the <strong>, <b>, <th> (table header), and header tags (<h1>, and so on) in bold type. But you can control these settings yourself—either turn off bold for a headline or italicize text that normally isn’t—using the font-style and font-weight properties.

To italicize text, add this to a style:

font-style: italic;

Alternatively, you can make sure text isn’t italicized, like so:

font-style: normal;

The font-weight property lets you make text bold or not. In fact, according to the rules of CSS, you can actually specify nine numeric values (100–900) to choose subtle gradations of boldness (from super-extra-heavy [900] to nearly-invisible-light [100]). Of course, the fonts you use must have nine different weights for these values to have any visible effect for your website’s visitors. And since there aren’t any fonts that work this way with web browsers yet, you have far fewer options for this property to worry about. So, for now, to make text bold:

font-weight: bold;

And to make text un-bold:

font-weight: normal;

h1 strong { color: #3399FF; }

Capitalizing text is pretty easy—just hit the caps lock key and start typing, right? But what if you want to capitalize every heading on a page, and the text you’ve copied and pasted from a Word document is lowercase? Rather than retyping the headline, turn to the CSS text-transform property. With it, you can make text all uppercase, all lowercase, or even capitalize the first letter of each word (for titles and headlines). Here’s an example:

text-transform: uppercase;

For the other two options, just use lowercase or capitalize.

Because this property is inherited, a tag that’s nested inside a tag with text-transform applied to it gets the same uppercase, lowercase, or capitalized value. To tell CSS not to change the case of text, use the none value:

text-transform: none;

font-variant: small-caps;

CSS also provides the text-decoration property to add various enhancements to text. With it, you can add lines over, under, or through the text (see Figure 6-6), or for real giggles you can make the text blink like a No Vacancy sign. Use the text-decoration property by adding one or more of the following keywords: underline, overline, line-through, or blink. For example, to underline text:

text-decoration: underline;

You can also combine multiple keywords for multiple effects. Here’s how to add a line over and under some text:

text-decoration: underline overline;

But just because you can add these not-so-decorative decorations to text, doesn’t mean you should. For one thing, anyone who’s used the Web for any length of time instinctively associates any underlined text with a link and tries to click it. So it’s not a good idea to underline words that aren’t part of a link. And blink is like a neon sign flashing “Amateur! Amateur! Amateur!” (On top of that most browsers don’t make text blink, even if you ask for it.)

The overline option simply draws a line above text, while line-through draws a line right through the center of text. Some designers use this strike-through effect to indicate an edit on a page where text has been removed from the original manuscript. Coupled with the a:visited selector, you can also create a cool effect where previously visited links are crossed out like a shopping list.

Figure 6-6. The text-decoration property in action. If this is what the people at CSS headquarters call “decorations,” you’d best not ask for their design help on your next home remodel.

Finally, you can turn off all decorations by using the none keyword like this:

text-decoration: none;

Why do you need a text-decoration property that removes decorations? The most common example is removing the line that appears under a link. (See Underlining Links.)

Another way to make text stand out from the crowd is to adjust the space that appears between letters or words (see Figure 6-7). Reducing the space between letters using the CSS letter-spacing property can tighten up headlines, making them seem even bolder and heavier while fitting more letters on a single line. Conversely, increasing the space can give headlines a calmer, more majestic quality. To reduce the space between letters, you use a negative value like this:

letter-spacing: -1px;

A positive value adds space between letters:

letter-spacing: 10px;

Likewise, you can open up space (or remove space) between words using the word-spacing property. This property makes the space wider (or narrower) without actually affecting the words themselves:

word-spacing: 2px;

With either of these properties, you can use any type of measurement you’d use for text sizing—pixels, ems, percentages—with either positive or negative values.

Figure 6-7. Use word and letter spacing judiciously. Too much or too little of either can make text difficult if not impossible to read.

Unless you’re going for some really far-out design effect—in other words, totally unreadable text—keep your values small. Too high a negative value, and letters and words overlap. To keep the message of your site clear and legible, use both letter and word spacing with care.

In addition to changing the space between words and letters, CSS lets you adjust the space between lines of text using the line-height property. The bigger the line height, the more space that appears between each line of text (see Figure 6-8).

Figure 6-8. The line-height property lets you spread a paragraph’s lines apart or bring them closer together. The normal setting is equivalent to 120 percent, so a smaller percentage tightens up the lines (top), while a larger percentage pushes them apart (bottom).

line-height: 150%;

line-height: 1.5;

One of the quickest ways to change the look of a web page is with paragraph alignment. Using the text-align property, you can center a paragraph on a page, align the text along its left or right edge, or justify both left and right edges (like the paragraphs in this book). Normally, text on a page is left aligned, but you may want to center headlines to give them a formal look. Languages that read from right to left, like Hebrew and Arabic, require right-alignment. To change the alignment of text, use any of the following keywords—left, right, justify, center:

text-align: center;

Justified text looks great on a printed page—mainly because the fine resolution possible with printing allows for small adjustments in spacing and because most programs used to layout printed material can hyphenate long words (thus attempting to equally distribute the number of characters per line). This prevents large, unsightly gaps or rivers of white space flowing through the paragraphs. Web pages are limited to much coarser spacing because of the generally low resolution of monitors and because web browsers don’t know how to hyphenate long words. So when you use the justify option, the space between words can vary significantly from line to line, making the text harder to read. When you want to use the justify option on your web pages, test it thoroughly to make sure the text is attractive and readable.

In many books, the first line of each paragraph is indented. This first-line indent marks the beginning of a paragraph when there are no spaces separating paragraphs. On the Web, however, paragraphs don’t have indents but are instead separated by a bit of space—like the paragraphs in this book.

If you have a hankering to make your web pages look less like other web pages and more like a handsomely printed book, take advantage of the CSS text-indent and margin properties. With them, you can add a first-line indent and remove (or increase) the margins that appear at the beginning and ends of paragraphs.

text-indent: 25px;

text-indent: 5em;

margin-top: 0;
margin-bottom: 0;

p {
  margin-top: 0;
  margin-bottom: 0;
}

CSS also provides a way of formatting just a part of a paragraph using the :first-letter and :first-line pseudo-elements (see Figure 6-9). Technically, these aren’t CSS properties, but types of selectors that determine what part of a paragraph CSS properties should apply to. With the :first-letter pseudo-element, you can create an initial capital letter to simulate the look of a hand-lettered manuscript. To make the first letter of each paragraph bold and red you could write this style:

p:first-letter {
  font-weight: bold;
  color: red;
}

To be more selective and format just the first letter of a particular paragraph, you can apply a class style to the paragraph—.intro, for example:

<p class="intro">Text for the introductory paragaph goes here...</p>

Then you could create a style with a name like this: .intro:first-letter.

The :first-line pseudo-element formats the initial line of a paragraph. You can apply this to any block of text like a heading (h2:first-line) or paragraph (p:first-line). As with :first-letter, you can apply a class to just one paragraph and format only the first line of that paragraph. Say you wanted to capitalize every letter in the first line of the first paragraph of a page. Apply a class to the HTML of the first paragraph—<p class="intro”>—and then create a style like this:

.intro:first-line { text-transform: uppercase; }

Figure 6-9. The :first-letter pseudo-element formats the first letter of the styled element, like the “initial caps” to the left. The :first-line selector, on the other hand, styles the first line of a paragraph. Even if your guest resizes the window (bottom), the browser still styles every word that appears on a paragraph’s first line.

Most web browsers display unordered lists (<ul> tags) using round bullets, and numbered lists (<ol> tags) using…well…numbers. With CSS, you can choose from among three types of bullets—disc (a solid round bullet), circle (a hollow round bullet), or square (a solid square). There are also six different numbering schemes—decimal, decimal-leading-zero, upper-alpha, lower-alpha, upper-roman, or lower-roman (see Figure 6-10). You select all these options using the list-style-type property, like so:

list-style-type: square;

or

list-style-type: upper-alpha;

Figure 6-10. Many web browsers display the decimal and decimal-leading-zero options identically. Firefox and other Mozilla-based browsers like Camino (pictured here) correctly display the decimal-leading-zero setting by adding a 0 before single digit-numbers—01, for example. Internet Explorer 6 and 7, however, don’t recognize either the decimal-leading-zero or lower-greek options.

Most of the time, you use this property on a style that’s formatting an <ol> or <ul> tag. Typical examples include an ol or ul tag style—ul { list-style-type: square; }—or a class you’re applying to one of those tags. However, you can also apply the property to an individual list item (<li> tag) as well. You can even apply different types of bullet styles to items within the same list. For example, you can create a style for a <ul> tag that sets the bullets to square, but then create a class named .circle that changes the bullet type to circle, like this:

.circle { list-style-type: circle; }

You can then apply the class to every other item in the list to create an alternating pattern of square and circular bullets:

<ul>
<li>Item 1</li>
<li class="circle">Item 2</li>
<li>Item 3</li>
<li class="circle">Item 4</li>
</ul>

At times you’ll want to completely hide bullets, like when you’d rather use your own graphic bullets (see Graphic Bullets). Also, when a site’s navigation bar is a list of links, you can use an <ul> list, but hide its bullets (see the example on Using Unordered Lists). To turn off the bullets, use the keyword none:

list-style-type: none;

Web browsers usually display bullets or numbers hanging to the left of the list item’s text (Figure 6-11, left). With CSS, you can control the position of the bullet (somewhat) using the list-style-position property. You can either have the bullet appear outside of the text (the way browsers normally display bullets) or inside the text block itself (Figure 6-11, right):

list-style-position: outside;

or

list-style-position: inside;

Figure 6-11. Using the list-style-position property, you can control the position of bullets and numbers in a list. The outside option (left) emphasizes the “listness” of your list. Use the inside option (right) if you need to maximize the width of your list.

In addition, if you don’t like how web browsers indent a list from the left edge, then you can remove that space by setting both the margin-left and padding-left properties to 0 for the list. To remove the indent from all lists, you could create this group selector:

ul, ol {
  padding-left: 0;
  margin-left: 0;
}

Or, you could create a class style with those properties and apply it to a particular <ul> or <ol> tag. The reason you need to set both the padding and margin properties is that some browsers use padding (Firefox, Mozilla, Safari) and some use margin (Internet Explorer) to control the indent. (You’ll learn more about the margin and padding properties in the next chapter.)

Browsers normally display one bulleted item directly above another, but you can add space between list items using the margin-top or margin-bottom properties on the particular list items. These properties work for spacing list items exactly the same way they work for spacing paragraphs, as explained on Formatting the First Letter or First Line of a Paragraph. You just need to make sure that the style applies to the <li> tags by creating a class style and applying it individually to each <li> tag. Or, better yet, create an <li> tag style or descendent selector. The style should not apply to the <ul> or <ol> tag. Adding margins to the top or bottom of those tags simply increases the space between the entire list and the paragraphs above or below it—not the space between each item in the list.

If you’re not happy with squares and circles for your bullets, create your own. Using an image-editing program like Photoshop or Fireworks, you can quickly create colorful and interesting bullets. Clip art collections and most symbol fonts (like Webdings) provide great inspiration.

The CSS list-style-image property lets you specify a path to a graphic on your site, much as you’d specify a file when adding an image to a page using the src attribute of the HTML <img> tag. You use the property like this:

list-style-image: url(images/bullet.gif);

The term url and the parentheses are required. The part inside the parentheses—images/bullet.gif in this example—is the path to the graphic. Notice that, unlike HTML, you don’t use quotation marks around the path.

While the list-style-image property lets you use a graphic for a bullet, it doesn’t provide any control over its placement. The bullet may appear too far above or below the line, requiring you to tweak the bullet graphic until you get it just right. A better approach—one you’ll learn in Chapter 8—is to use the background-image property. That property lets you very accurately place a graphic for your bulleted lists.

First, you’ll get your style sheet started and add styles to format the body text.

Now that the basic text formatting is done, it’s time to refine the presentation of the headlines and paragraphs.

This page has a single bulleted list. The plan is to move the list over to the right edge of the page and have the text following it wrap around it. CSS makes this little trick easy.

Sometimes you want even more control over how a style is applied. For example, while you might want most paragraphs in one section of the page to look the same, you might also want one or two paragraphs to have their own unique look. In this tutorial, the paragraph of text near the top of the page—“November 30 Rod Dibble”—contains some unique information—a publication date and author. You want it stand out from the other paragraphs, so you’ll add a class to the HTML and create a class style.

Figure 6-14. The float property gives you some interesting design options. In this case, the bulleted list is floated to the right edge of the page. In fact the float property is so useful, you’ll see that it’s the main ingredient of CSS-based layouts, like the ones you’ll learn about in Chapter 11.

For the last bit of design, you’ll incorporate a few design touches that format the page and that main div so they both look better. Then you’ll finish up with a cool bit of text formatting.

Congratulations! You’ve explored many of the text formatting properties offered by CSS, and turned ho-hum HTML into an attractive, attention-getting design. In the next chapter, you’ll explore graphics, borders, margins, and other powerful CSS design options offered by CSS.

Figure 6-15. With a little CSS, you can turn plain text into a powerful design statement that helps guide readers through the information on your site.