| One of the best-known abilities of CSS is that of being able to change fonts throughout a page by changing one rule. In other words, you can change the display of all of the text assigned to a class simply by changing the class's definition. In Script 11.4 , adding font information to the body rule causes the entire page to display as you like it, as shown in Figure 11.4 . Script 11.4. Note the differences to the body selector compared to Script 11.2 . | body { background-color: white; color: black; font-family: "Trebuchet MS", verdana, helvetica, arial, sans-serif; font-size: 0.9em; } img { margin-right: 10px; } .character { font-weight: bold; text-transform: uppercase; } div.character { margin: 1.5em 0em 1em 17em; } .directions { font-style: italic; } .dialog, .directions { margin-left: 22em; } | Figure 11.4. Changing the body selector changed the font and font size on the whole page. To change fonts with CSS: -
body { background-color: white; color: black; font-family: "Trebuchet MS", verdana, helvetica, arial, sans-serif; font-size: 0.9em; } We've added two attributes to the body selector: font-family and font-size . The former, like the old <font> tag, takes a list of fonts, and the browser displays the first one it has available, going through the list from left to right. The last font given is the generic font sans-serif , which tells the browser (if this feature is supported) that if it can't find any of the listed fonts, to use any sans-serif font as a fallback. The font-size attribute, in this case, is set to display all the text at 0.9 em. Tip |