CSS Cookbook: How to make a printer-friendly page with a style sheet

1 2 3 4 5 6 Page 3
Page 3 of 6

Because you want people to actually read the header, you want the text to be white to create enough contrast. In this instance, the main header also acts as a homing device—it is a link to the home page. Therefore, the color of the heading is dictated by the style rules set for the links. To remedy this situation, add a separate rule:

#header h1 {
 background-color: black;
}
#header h1 a {
 color: white;
}

Now that the text is visible, stylize it a bit so that it stands out. Your goal is to center the text, increase the size of the text, and make all the letters uppercase:

#header h1 {
 background-color: black;
 font-size: 24pt;
 text-align: center;
 text-transform: uppercase;
}

Although this looks good, you can improve it by changing the typeface to sans-serif (so that it sticks out from the rest of the text in the document) and by adding some padding around the top and bottom of the heading (see Figure 10-5):

#header h1 {
 background-color: black;
 font-size: 24pt;
 text-align: center;
 font-family: Helvetica, 
 Verdana, Arial, sans-serif;
 padding: 7pt;
 text-transform: uppercase;  
}
Figure 10-5. Stylizing the main header

Figure 10-5. Stylizing the main header (click image for larger view)

1 2 3 4 5 6 Page 3
Page 3 of 6
7 inconvenient truths about the hybrid work trend
Shop Tech Products at Amazon