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

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

Styling the Article Header and Byline

For the article title and byline, create a more dramatic approach by zeroing out the margins and padding of both the h2 and h3 elements:

#content h2 {
 padding: 0;
 margin: 0;
}
#content h3 {
 padding: 0;
 margin: 0 ;
}

Then increase the font size for the article title and create a thin hairline rule below it. Next, align the byline to the right and set the type style to italic (see Figure 10-6):

#content h2 {
 padding: 0;
 margin: 0;
 font-size: 20pt;
 border-bottom: 1px solid black;
}
#content h3 {
 padding: 0;
 margin: 0;
 text-align: right;
 font-style: italic; 
}
Figure 10-6. Designing the article header and byline

Figure 10-6. Designing the article header and byline (click image for larger view)

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