- Specifying Fonts in CSS
- Exploring Font Families
- Sizing Fonts
- Font Properties
- Text Properties
- Using Font and Text Styles
This chapter is from the book
This chapter is from the book
This chapter is from the book
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.23 Here's our unstyled markup from the Chapter 1 example.
By applying only styles we learned in this chapter plus the margin property, the page suddenly looks like someone actually designed it ( Figure 3.24 ).
)
Figure 3.24 Here's the Chapter 1 sample markup styled with font and text styles
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;}
Here we "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;}
The large left margin indents the list. We've also italicized the list and increased line spacing for any lines that may wrap.
-
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.
Remember that once styles like these are in a style sheet, they are applied to all the pages that link to it, so you can get a whole Web site's-worth of mileage out of the work you put into styling a page like this.