Making sense of CSS - Build Windows 8 Apps with HTML5 and JavaScript - page 59

background-image: url(/images/bkgnd.png);
background-repeat: no-repeat;
background-attachment: fixed;
font-family: "trebuchet ms", helvetica, sans-serif;
}
Font families are listed in order of preference. If the first choice is not available, then the browser
moves on to the second, and so on. If a font name contains spaces, it is preferable to enclose it in
quotes even though this is not always strictly necessary on all browsers.
Years of HTML development have taught developers that Helvetica and Sans-serif as backup fonts
are a great choice that ensures at least decent rendering across all browsers.
What about the size of the font? You can indicate the desired font size through relative and
absolute lengths and using a number of measurements. For example, you can use keywords like
x-small , small , medium , large , and x-large . These keywords are relative to the standard browser font
size, as modified by the user. If you indicate the font size as a percentage, then the actual size is
relative to the surrounding text. If you use a number between 0 and 1 with the em measure, then the
actual size is relative to the parent element. Finally, if you use a number of pixels ( px is the measure),
then the actual size is relative to the screen resolution. Here are a few examples:
#footer {
font-size: 80%;
}
#copyright {
font-size: 9px;
}
#trademark {
font-size: .8em;
}
Relative lengths are the best possible choice for rendering on a screen. Absolute lengths, such as
points ( pt is the measure) or perhaps millimeters ( mm is the measure), may lead to text that shows
larger or smaller on different computers.
Important As mentioned, for Windows 8 applications it is preferable that you stick to the
classes defined in the standard Windows 8 style sheets.
Styling fonts
More often than not, you want to alter the default style of the font to give some text more relevance.
This means making some text italic, bold, or perhaps underlined. Boldness is expressed through the
font-weight property, whereas styles (that is, italic) require the font-style property.