HTML and CSS Reference
In-Depth Information
p {
margin-top: 0;
font-size: 10pt;
}
9.
Adjust the size of the heading fonts too (note that the sizes are specified using
points, not pixels). Also remove the left and right margins from the
<h2>
and
<h3>
headings. The edited rules look like this:
h1 {
text-align: center;
margin-top: 0;
font-size: 18pt;
}
h2, h3 {
margin-bottom: 0.25em;
font-size: 14pt;
}
h3 {
font-size: 12pt;
}
10. The following style rules are related to controlling images at different screen
widths or decorative elements. So, they can be deleted:
.imgcentered
,
.figure.floatleft
,
.figure.floatright
,
.figure
,
.figure img
,
.portrait
,
.rounded
, and
.shadow
.
11. The navigation menu doesn't need to be included in the printed version, so
delete all rules related to
#nav
, and replace them with the following style rule to
hide it:
#nav {
display: none;
}
12. Remove the underlining and text color of links, and display the URL of external
links using the
::after
pseudo-class (see “Generating Content from an
Attribute” in
Chapter 15
) like this:
a {
text-decoration: none;
color: #000;
}
a[href^="http://"]::after {
content: ': ' attr(href);
}
13. Save the web page and print.css. Load the page into several different browsers,
and test
Print Preview
. Although the page is formatted ready for printing, there are
considerable differences in the final layout. The main problems are with the images.
Older browsers often slice images in two if they come near a page break. The most
recent browsers shift the image to the next page if there isn't sufficient space.
However, IE 9 doesn't reflow the text when this happens, leaving a large blank space
where the image would originally have been (see Figure
16-4
).
