Using Font and Text Styles
Using the markup we developed in Chapter 1, let's look at how we can transform a very ordinary looking page into a more professional looking piece. Figure 3.23 shows the unstyled markup:

Figure 3.24).

Here are the styles:
body {font-family:verdana, arial, sans-serif; font-size:100%; margin:1em 2em;} These are baseline styles for the font and page margins. The font-family is inherited by all elements and the margins move all the elements in from the edges of the page. * {margin:0; padding:0;} "neutralize" all the default margins on the elements that eat up so much vertical space in the unstyled version. We also do the same for the padding to enable us to apply consistent styles to the lists for all browsers. By removing all the default margins and padding, only elements that we decide should have them, have them. h3 {font-size:.7em; word-spacing:1em; letter-spacing:-.05em; margin:.5em 0;} Here we've set tight letter spacing and wide word spacing. H1 {font-size:1.1em; text-transform:uppercase; text-align:center; letter-spacing:.2em; margin: .5em 0;} The header is now centered with increased letter spacing and all capitals. p {font-size:.75em; line-height:1.5em; text-indent:-1.75em; margin: 0.5em 0 .75em 1.75em;} Here we've reduced the type size, increased the line height, and set a negative indent for the first line. ol {margin-left:6em; font-size:.75em; line-height:1.5; font-style:italic;} a {margin-left:6.5em; font-size:.7em;} We set the left margin to make the link sit under the list text. a:hover {text-decoration:overline underline;} When the link is hovered, we get an interesting above and below underline. (Hovered behavior not shown in Figure 3.24.) ul {margin-left:6em; font-size:.75em; line-height:1.75; font-style:italic;} This list is also indented and italicized. ul a {font-size:1em; margin:0;} The list items are links so we style these differently from non-list links using a contextual selector sup {vertical-align:35%; font-size:65%;} A custom treatment of the sup tag. div#homepagefooter p {font-size:.7em; font-weight:bold;} We've created small bold type for the footer.
like this.
|