Beginning XHTML

Try It Out - Applying Margins to the Body Element

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.

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 } 
}

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!

Whitepapers and eBooks

Microsoft Articles: Visual Studio 2010
Adobe Article: Adobe Helps PHP Developers Create Rich Internet Applications
Microsoft Whitepaper: How Windows Server 2008 R2 Helps Optimize IT and Save You Money
Adobe Article: Java Developers Finding a Home at Adobe Flex
IBM Articles: A Smarter Business Needs Smarter Technology
Intel Xeon Processor Increases Server Efficiency and Capabilities
Intel Tech Brief: Automated Energy Efficiency for the Intelligent Enterprise
Oracle Whitepapers - Innovation for IT Leaders
Avaya Article: Communication-Enabled Mashups--Empowering Both Business Owners and IT

Internet.com eBook: IT Manager's Guide to Social Networking
Internet.com eBook: Get Ready for Windows 7
Microsoft Article: Expression Web 3--New Features for PHP Developers
Whitepapers: Manage Your Business Infrastracture with IBM
Whitepaper: Maximize Your Storage Investment with HP
Internet.com eBook: Becoming a Better Project Manager
Microsoft Article: Stress Free and Efficient Designer/Developer Collaboration
MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Downloads and eKits

Tutorials and Demos

URL: http://webreference.com/authoring/languages/xhtml/beginning/chap13/3/