HTML and CSS Reference
In-Depth Information
Creating an External Style Sheet for Printing
You will next create an external style sheet that will be used for printing a Web page. When
Web site visitors print a Web page, they generally want to print the content of the Web page,
which does not include the navigation bar. You can limit what appears on the printed page by
creating an external style sheet that is used specifically to set the styles for a printed Web page.
Understanding the Page Box Model
In this external style sheet, you will add a page box with an @page rule to format the
printed page. A page box is a rectangular region that contains two areas: the page area and
the margin area. The page area includes the elements (or boxes) laid out on the page. The
margin area surrounds the page area; the page margin area is transparent. Web developers
can specify the margins of a page box inside an @page rule. An @page rule contains the
keyword @page, followed by an optional page selector, followed by a block of declarations.
Page selectors give a Web developer the flexibility to designate the first page, all left pages,
or all right pages. For instance, you could specify different margins for the first printed
page of a Web site. You could therefore use the first pseudoclass in your @page rule by
using the statement:
@page Rule
There are many ways to
control the printing of a
Web page. Paged media
(paper or transparencies)
differ from continuous
media in that the content
of the document is split
into one or more discrete
pages. Using the @page
rule gives you the
flexibility that you need.
@page :first { }
The printing external style sheet does not use any optional page selectors. It does include
a declaration in the @page rule with the statement:
@page {margin: 0.5in;}
As with other external style sheets, you must first create the external style sheet, and
then you must link that style sheet into the Web page(s) for which you want to use it using
the <link /> statement.
To Create an External Style Sheet for Printing
Table 7-8 shows the code for the external style sheet for printing.
Table 7-8 Code for a Print Style Sheet
Line
CSS Code
@page
{margin: 0.5in;}
1
/* set printed page with half inch margins */
2
3
4
#menubar {display: none;}
/* do not print the menubar that displays at the top of the Web page */
5
6
7
box
{text-align: left; font-size: 12pt; font-family: Times New Roman;}
posit
{border-width: 0px; width: 7.125in; height: 5.361in;}
8
/* specific styles set for paragraph box and image posit classes */
9
Lines 2, 5, and 9 are all comment lines. They are important because they explain the code above them. Line 4
indicates that the id named menubar should not display (or print). Lines 7 and 8 define the parameters for printing
of the box and posit classes.
Search WWH ::




Custom Search