Applying Margins to the Body Element
October 30, 2000
In this exercise, we will apply the margin property to the body element.
We would like to be showing you how to apply margins to the @page rules,
but since they don't currently work in the major browsers, this is the
next best approach.
2. Load the file pb-none.css into your text editor and make the following
changes:
@media screen, print {
body { font-size: 18pt }
h1 { font-size: 24pt; text-transform:
uppercase; text-align: center }
.stage { font-style: italic }
p.stage { text-align: center }
}
@media screen {
body { font-family: sans-serif }
span.speaker { background-color: yellow }
}
@media print {
body { font-family: serif; margin-left: 3cm; margin-right: 3cm }
span.speaker { font-weight: bold }
}
[Note: The 3rd and 4th line above is one line They were split for formatting
purposes]
Save the file as pb-margins.css
Load the file pb-none.htm into your text editor and make the following changes:
<head>
<title>Page Margin Example</title>
<link rel="stylesheet" type="text/css" href="pb-margins.css" />
</head>
Save the file as pb-margins.htm and run it in your browser. You will see
the same screen shot as before because we have not changed the screen
style sheet properties, so we will not show that shot here.
|
However, you should see a difference when the document is printed:
|
|
How it Works
In Step 1, we described how we wanted the document to print by
specifying three @media rules. If you look at the third @media rule:
@media print {
body { font-family: serif; margin-left: 3cm; margin-right: 3cm }
span.speaker { font-weight: bold }
}
We can see that we specified that the left margin and right margin
should be 3 centimeters. Notice that we did not assign these properties
in the @media rules for the screen media type or the shared screen and
print media rules. This means that the margins will only be seen when
the document is printed.
In Step 2, we associate the style sheet with our document, and in Step 3
we load the document into Microsoft Internet Explorer.
As you can see in Step 3, there is no hint of a margin. This is because
we did not specify any value for the margins for the screen media type
in Step 1.
In Step 4, we print the document and the margins appear; this is because
we specified margins for the print media type in Step 1.
The 'marks' Property
You use the marks property to display crop marks and cross marks on the
printed page. Crop marks indicate where the paper should be cut;
this is important when you print a document on a page that is larger
than the target page size. Cross marks are used so that multiple
pages can be aligned.
To show crop marks, we write:
@page { marks: crop }
and to show cross marks, we write:
@page { marks: cross }
If you do not want to show any marks (which is the default), we write:
@page { marks: none }
Since crop and cross marks appear outside of the normal page area, they
can only be seen if you set your page size, using the @page rule's size
property, to an absolute value.
Naming @page rules and the page property
As mentioned earlier, the @page rules can be applied to the entire
document by writing:
@page { /* properties */ }
to left hand pages by writing:
@page :left { /* properties */ }
and to right hand pages by writing:
@page :right { /* properties */ }
In addition, you can name @page rules so that you can apply them with
greater fidelity. To name an @page rule, you write:
@page name {/* properties */ }
where name is replaced with the name of your rule. For example, if you
wanted to write an @page named 'rotated' that forced an element to
appear in landscape mode, you would write:
@page rotated { size: landscape }
This named @page rule can then be applied to an element by using the
page property. For example, if you wanted all tables to appear on paper
in landscape mode, you would write:
@page rotated { size: landscape }
table { page: rotated }
This means that all tables will appear on pages that are printed in
landscape mode. If it happens that the page containing the table is
being printed in a different mode, a page break will be inserted before
the table, forcing the table to appear on a new page printed in
landscape mode.
Unfortunately, as mentioned before, the @page rules are not currently
supported in the major browsers, so we do not have the chance to use
these properties in practice!
The 'size' Property
Beginning XHTML
Strategies for Handling Media Types
|
