• Choose a category
• All
• Classic-Fiction

By Root 1512 0

have heading tags in place, so it’s easy to see that you mean for a particular image to act as a headline. You can still see the page organization in the XHTML code.

♦ You have fallback text. The alt attributes will activate if the images can’t be displayed.

♦ The semantic meaning of image headlines is preserved. The alt tags provide another great feature. If they replicate the image text, this text is still available to screen readers and search engines, so the text isn’t buried in the image.

This technique is great for headlines or other areas, but notice that I was careful to repeat the headline text in the tag. This is important because I don’t want to lose the text. Search engine tools and screen readers need the text.

Don’t be tempted to use this technique for larger amounts of body text. Doing so causes some problems:

♦ The text is no longer searchable. Search engines can’t find text if it’s buried in images.

♦ The text is harder to change. You can’t update your page with a text editor. Instead, you have to download the image, modify it, and upload it again.

♦ Images require a lot more bandwidth than text. Don’t use images if they don’t substantially add to your page. You can make the case for a few heading images, but it’s harder to justify having your entire page stored as an image just to use a particular font.

Specifying the Font Size

Like font names, font sizes are easy to change in CSS, but there are some hidden traps.

Size is only a suggestion!

In print media, after you determine the size of the text, it pretty much stays there. The user can’t change the font size in print easily. By comparison, Web browsers frequently change the size of text. A cellphone-based browser displays text differently than one on a high-resolution LCD panel. Further, most browsers allow the user to change the size of all the text on the screen. Use Ctrl++ (plus sign) and Ctrl+– (minus sign) to make the text larger or smaller. In older versions of IE (prior to IE7), choose the Text Size option from the Page menu to change the text size.

The user should really have the ability to adjust the font size in the browser. When I display a Web page on a projector, I often adjust the font size so students in the back can read. Some pages have the font size set way too small for me to read. (It’s probably my high-tech monitor. It couldn’t possibly have anything to do with my age.)

Determining font sizes precisely is counter to the spirit of the Web. If you declare that your text will be exactly 12 points, for example, one of two things could happen:

♦ The browser might enforce the 12-point rule literally. This takes control from the user, so users who need larger fonts are out of luck. Older versions of IE do this.

♦ The user might still change the size. If this is how the browser behaves (and it usually is), 12 points doesn’t always mean 12 points. If the user can change font sizes, the literal size selection is meaningless.

The Web developer should set up font sizes, but only in relative terms. Don’t bother using absolute measurements (in most cases) because they don’t really mean what you think. Let the user determine the base font size and specify relative changes to that size.

Using the font-size style attribute

The basic idea of font size is pretty easy to grasp in CSS. Take a look at fontSize.html in Figure 2-6.

This page obviously shows a number of different font sizes. The line “Font Sizes” is an ordinary h1 element. All the other lines are paragraph tags. They appear in different sizes because they have different styles applied to them.

Figure 2-6: You can easily modify font sizes in your pages.

Font sizes are changed with the (cleverly named) font-size attribute:

p {

font-size: small;

}

Simply indicate the font-size rule, and, well, the size of the font. In this example, I used the special value small, but there are many other ways to specify sizes in CSS.

Absolute measurement units

Many times, you need to specify the size of something in CSS. Of course,