CSS TUTORIAL : Media

     Sample of the pdf document : 

The purpose of CSS is to specify how documents are presented to the user. Presentation can take more than one form.

For example, you are probably reading this page on a display device. But you might also want to project it on a screen for a large audience, or print it. These different media can have different characteristics. CSS provides ways to present a document differently in different media.

To specify rules that are specific to a type of media, use @media followed by the media type, followed by curly braces that enclose the rules.

Example:

A document on a web site has a navigation area to allow the user to move around the site.

In the markup language, the navigation area's parent element has the id nav-area. (In HTML5, this can be marked up with the<nav> element instead of <div> with an id attribute.)

When the document is printed the navigation area has no purpose, so the stylesheet removes it completely:

1 2 3

@media print {   #nav-area {display: none;}   }

Some of the common media types are:

screen	Color computer display
print	Paged media
projection	Projected display
all	All media (the default)

Printing

CSS has some specific support for printing and for paged media in general.

A @page rule can set the page margins. For double-sided printing, you can specify the margins separately for @page:left and @page:right.

For print media, you normally use appropriate length units like inches (in) and points (pt = 1/72 inch), or centimeters (cm) and millimeters (mm). It is equally appropriate to use ems (em) to match the font size, and percentages (%).

You can control how the content of the document breaks across page boundaries, by using the page-break-before, page-break-after and page-break-insideproperties.

Example

This rule sets the page margins to one inch on all four sides:

1	@page {margin: 1in;}

This rule ensures that ..........

   Click here for  Download PDF / FREE