Media

  • Revision slug: CSS/Getting_Started/Media
  • Revision title: Media
  • Revision id: 289444
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

 Many of the pages in this tutorial have focussed on the CSS properties and values that you can use to specify how to display a document. This page looks again at the purpose and structure of CSS stylesheets.

This is the 14th and last section of Part I of the CSS Getting Started tutorial.
Previous section: Tables
Next section: Part II, section 1, JavaScript

Information: Media

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 {{ CSSXref("@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 {{ HTMLVersionInline(5) }}, this can be marked up with the {{ HTMLElement("nav") }} element instead of {{ HTMLElement("div") }} with an id attribute.)

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

@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)

 

More details
There are other ways to specify the media type of a set of rules.

The document's markup language might allow the media type to be specified when the stylesheet is linked to the document. For example, in HTML you can optionally specify the media type with a media attribute in the LINK tag.

In CSS you can use {{ CSSXref("@import") }} at the start of a stylesheet to import another stylesheet from a URL, optionally specifying the media type.

By using these techniques you can separate style rules for different media types into different files. This is sometimes a useful way to structure your stylesheets.

For full details of media types, see Media in the CSS Specification.

There are more examples of the {{ cssxref("display") }} property in a later page in this tutorial: XML data.

Printing

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

A {{ cssxref("@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 {{ cssxref("page-break-before") }}, {{ cssxref("page-break-after") }} and {{ cssxref("page-break-inside") }} properties.

Examples
This rule sets the page margins to one inch on all four sides:
@page {margin: 1in;}

This rule ensures that every H1 element starts on a new page:

h1 {page-break-before: always;}

 

More details
For full details of CSS support for paged media, see Paged media in the CSS Specification.

Like other features of CSS, printing depends on your browser and its settings. For example, your Mozilla browser supplies default margins, headers and footers when it prints. When other users print your document, you probably cannot predict the browser and the settings that they will use, so you probably cannot control the results completely.

User interfaces

CSS has some special properties for devices that support a user interface, like computer displays. These make the document's appearance change dynamically as the user works with the interface.

There is no special media type for devices with user interfaces.

There are five special selectors:

Selector Selects
E{{ cssxref(":hover") }} Any E element that has the pointer over it
E{{ cssxref(":focus") }} Any E element that has keyboard focus
E{{ cssxref(":active") }} The E element that is involved in the current user action
E{{ cssxref(":link") }} Any E element that is a hyperlink to a URL that the user has not visited recently
E{{ cssxref(":visited") }} Any E element that is a hyperlink to a URL that the user has visited recently

Note: The information that can be obtained from the :visited selector is restricted in {{ gecko("2.0") }}. See Privacy and the :visited selector for more details.

The {{ cssxref("cursor") }} property specifies the shape of the pointer: Some of the common shapes are as follows. Place your mouse over the items in this list to see the actual pointer shapes in your browser:

Selector Selects
pointer Indicating a link
wait Indicating that the program cannot accept input
progress Indicating that the program is working, but can still accept input
default The default (usually an arrow)


An {{ cssxref("outline") }} property creates an outline that is often used to indicate keyboard focus. Its values are similar to the {{ cssxref("border") }} property, except that you cannot specify individual sides.

Some other features of user interfaces are implemented using attributes, in the normal way. For example, an element that is disabled or read-only has the disabled attribute or the readonly attribute. Selectors can specify these attributes like any other attributes, by using square brackets: {{ mediawiki.external('disabled') }} or {{ mediawiki.external('readonly') }}.

Example
These rules specify styles for a button that changes dynamically as the user interacts with it:
.green-button {
  background-color:#cec;
  color:#black;
  border:2px outset #cec;
  }

.green-button[disabled] {
  background-color:#cdc;
  color:#777;
  }

.green-button:active {
  border-style: inset;
  }

This wiki does not support a user interface on the page, so these buttons do not "click". Here are some static images to illustrate the idea:

Click Me Click Me Click Me
 
disabled normal active

A fully functional button also has a dark outline around the entire button when it is the default, and a dotted outline on the face of the button when it has keyboard focus. It might also have a hover effect when the pointer is over it.

More details
For more information about user interfaces in CSS, see User interface in the CSS Specification.

There is an example of Mozilla's markup language for user interfaces, XUL, in Part II of this tutorial.

Action: Printing a document

  1. Make a new HTML document, doc4.html. Copy and paste the content from here, making sure that you scroll to get all of it:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
    <HTML>
    
    <HEAD>
    <TITLE>Print sample</TITLE>
    <LINK rel="stylesheet" type="text/css" href="style4.css"></strong>
    </HEAD>
    
    <BODY>
    <H1>Section A</H1>
    <P>This is the first section...</P>
    
    <H1>Section B</H1>
    <P>This is the second section...</P>
    
    <DIV id="print-head">
    Heading for paged media
    </DIV>
    
    <DIV id="print-foot">
    Page: 
    </DIV>
    
    </BODY>
    </HTML>
    
  2. Make a new stylesheet, style4.css. Copy and paste the content from here, making sure that you scroll to get all of it:
    /*** Print sample ***/
    
    /* defaults  for screen */
    #print-head,
    #print-foot {
      display: none;
      }
    
    /* print only */
    @media print {
    
    h1 {
      page-break-before: always;
      padding-top: 2em;
      }
    
    h1:first-child {
      page-break-before: avoid;
      counter-reset: page;
      }
    
    #print-head {
      display: block;
      position: fixed;
      top: 0pt;
      left:0pt;
      right: 0pt;
    
      font-size: 200%;
      text-align: center;
      }
    
    #print-foot {
      display: block;
      position: fixed;
      bottom: 0pt;
      right: 0pt;
    
      font-size: 200%;
      }
    
    #print-foot:after {
      content: counter(page);
      counter-increment: page;
      }
    
    } /* end print only */
    
  3. View this document in your browser; it uses your browser's default style.
  4. Print (or print preview) the document; the stylesheet places each section on a separate page, and it adds a header and footer to each page. If your browser supports counters, it adds a page number in the footer.
    Heading for paged media
    Section A
    This is the first section...
    Page: 1
    Heading for paged media
    Section B
    This is the second section...
    Page: 2
Challenges
Move the print-specific style rules to a separate CSS file.

Read the {{ CSSXref("@import") }} reference page to find details of how to import the new print-specific CSS file into your style4.css stylesheet.

Make the headings turn blue when the mouse pointer is over them.

 See solutions to these challenges.

What next?

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

So far, all the style rules in this tutorial have been specified in files. The rules and their values are fixed. The next page describes how you can change rules dynamically by using a programming language: JavaScript

{{ CSSTutorialTOC() }}

{{ languages( { "fr": "fr/CSS/Premiers_pas/M\u00e9dias", "pl": "pl/CSS/Na_pocz\u0105tek/Media", "pt": "pt/CSS/Como_come\u00e7ar/M\u00eddia" } ) }}

Revision Source

<p> Many of the pages in this tutorial have focussed on the CSS properties and values that you can use to specify how to display a document. This page looks again at the purpose and structure of CSS stylesheets.</p>
<p>This is the 14th and last section of Part I of the <a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS Getting Started</a> tutorial.<br>
Previous section: <a href="/en/CSS/Getting_Started/Tables" title="en/CSS/Getting Started/Tables">Tables<br>
</a>Next section: Part II, section 1, <a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting started/JavaScript">JavaScript</a></p>
<h2 id="Information:_Media">Information: Media</h2>
<p>The purpose of CSS is to specify how documents are presented to the user. Presentation can take more than one form.</p>
<p>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.</p>
<p>To specify rules that are specific to a type of media, use {{ CSSXref("@media") }} followed by the media type, followed by curly braces that enclose the rules.</p>
<table style="border:1px solid #36b; padding:1em; background-color:#fffff4;width:100%"> <caption style="font-weight:bold; text-align:left;">Example </caption> <tbody> <tr> <td>A document on a web site has a navigation area to allow the user to move around the site. <p>In the markup language, the navigation area's parent element has the <strong>id</strong> <code>nav-area</code>. (In {{ HTMLVersionInline(5) }}, this can be marked up with the {{ HTMLElement("nav") }} element instead of {{ HTMLElement("div") }} with an <strong>id</strong> attribute.)</p> <p>When the document is printed the navigation area has no purpose, so the stylesheet removes it completely:</p> <div style="width:30em;"> <pre class="eval">
@media print {
  #nav-area {display: none;}
  }
</pre> </div> </td> </tr> </tbody>
</table>
<p>Some of the common media types are:</p>
<table style="margin-left:2em;"> <tbody> <tr> <td><code>screen</code></td> <td>Color computer display</td> </tr> <tr> <td><code>print</code></td> <td>Paged media</td> </tr> <tr> <td style="padding-right:1em;"><code>projection</code></td> <td>Projected display</td> </tr> <tr> <td><code>all</code></td> <td>All media (the default)</td> </tr> </tbody>
</table>
<p> </p>
<table style="border:1px solid #36b; padding:1em; background-color:#f4f4f4; width:100%;"> <caption style="font-weight:bold; text-align:left;">More details </caption> <tbody> <tr> <td>There are other ways to specify the media type of a set of rules. <p>The document's markup language might allow the media type to be specified when the stylesheet is linked to the document. For example, in HTML you can optionally specify the media type with a <code>media</code> attribute in the <code>LINK</code> tag.</p> <p>In CSS you can use {{ CSSXref("@import") }} at the start of a stylesheet to import another stylesheet from a URL, optionally specifying the media type.</p> <p>By using these techniques you can separate style rules for different media types into different files. This is sometimes a useful way to structure your stylesheets.</p> <p>For full details of media types, see <a class="external" href="http://www.w3.org/TR/CSS21/media.html">Media</a> in the CSS Specification.</p> <p>There are more examples of the {{ cssxref("display") }} property in a later page in this tutorial: <a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML data</a>.</p> </td> </tr> </tbody>
</table>
<h3 id="Printing">Printing</h3>
<p>CSS has some specific support for printing and for paged media in general.</p>
<p>A {{ cssxref("@page") }} rule can set the page margins. For double-sided printing, you can specify the margins separately for <code>@page:left</code> and <code>@page:right</code>.</p>
<p>For print media, you normally use appropriate length units like inches (<code>in</code>) and points (<code>pt</code> = 1/72 inch), or centimeters (<code>cm</code>) and millimeters (<code>mm</code>). It is equally appropriate to use ems (<code>em</code>) to match the font size, and percentages (<code>%</code>).</p>
<p>You can control how the content of the document breaks across page boundaries, by using the {{ cssxref("page-break-before") }}, {{ cssxref("page-break-after") }} and {{ cssxref("page-break-inside") }} properties.</p>
<table style="border:1px solid #36b; padding:1em; background-color:#fffff4; width:100%;"> <caption style="font-weight:bold; text-align:left;">Examples </caption> <tbody> <tr> <td>This rule sets the page margins to one inch on all four sides: <div style="width:30em;"> <pre class="eval">
@page {margin: 1in;}
</pre> </div> <p>This rule ensures that every <small>H1</small> element starts on a new page:</p> <div style="width:30em;"> <pre class="eval">
h1 {page-break-before: always;}
</pre> </div> </td> </tr> </tbody>
</table>
<p> </p>
<table style="border:1px solid #36b; padding:1em; background-color:#f4f4f4; width:100%;"> <caption style="font-weight:bold; text-align:left;">More details </caption> <tbody> <tr> <td>For full details of CSS support for paged media, see <a class="external" href="http://www.w3.org/TR/CSS21/page.html">Paged media</a> in the CSS Specification. <p>Like other features of CSS, printing depends on your browser and its settings. For example, your Mozilla browser supplies default margins, headers and footers when it prints. When other users print your document, you probably cannot predict the browser and the settings that they will use, so you probably cannot control the results completely.</p> </td> </tr> </tbody>
</table>
<h3 id="User_interfaces">User interfaces</h3>
<p>CSS has some special properties for devices that support a user interface, like computer displays. These make the document's appearance change dynamically as the user works with the interface.</p>
<p>There is no special media type for devices with user interfaces.</p>
<p>There are five special selectors:</p>
<table style="margin-left:2em;"> <tbody> <tr> <td style="width:10em;"><strong>Selector</strong></td> <td><strong>Selects</strong></td> </tr> <tr> <td><code>E{{ cssxref(":hover") }}</code></td> <td>Any E element that has the pointer over it</td> </tr> <tr> <td><code>E{{ cssxref(":focus") }}</code></td> <td>Any E element that has keyboard focus</td> </tr> <tr> <td><code>E{{ cssxref(":active") }}</code></td> <td>The E element that is involved in the current user action</td> </tr> <tr> <td><code>E{{ cssxref(":link") }}</code></td> <td>Any E element that is a hyperlink to a URL that the user has <em>not</em> visited recently</td> </tr> <tr> <td><code>E{{ cssxref(":visited") }}</code></td> <td>Any E element that is a hyperlink to a URL that the user <em>has</em> visited recently</td> </tr> </tbody>
</table>
<div class="note">
<p><strong>Note: </strong>The information that can be obtained from the :visited selector is restricted in {{ gecko("2.0") }}. See <a href="/en/CSS/Privacy_and_the_:visited_selector" title="en/CSS/Privacy and the :visited selector">Privacy and the :visited selector</a> for more details.</p>
</div>
<p>The {{ cssxref("cursor") }} property specifies the shape of the pointer: Some of the common shapes are as follows. Place your mouse over the items in this list to see the actual pointer shapes in your browser:</p>
<table style="margin-left:2em;"> <tbody> <tr> <td style="width:10em;"><strong>Selector</strong></td> <td><strong>Selects</strong></td> </tr> <tr style="cursor:pointer;"> <td><code>pointer</code></td> <td>Indicating a link</td> </tr> <tr style="cursor:wait;"> <td><code>wait</code></td> <td>Indicating that the program cannot accept input</td> </tr> <tr style="cursor:progress;"> <td><code>progress</code></td> <td>Indicating that the program is working, but can still accept input</td> </tr> <tr style="cursor:default;"> <td><code>default</code></td> <td>The default (usually an arrow)</td> </tr> </tbody>
</table>
<p><br>
An {{ cssxref("outline") }} property creates an outline that is often used to indicate keyboard focus. Its values are similar to the {{ cssxref("border") }} property, except that you cannot specify individual sides.</p>
<p>Some other features of user interfaces are implemented using attributes, in the normal way. For example, an element that is disabled or read-only has the <strong>disabled</strong> attribute or the <strong>readonly</strong> attribute. Selectors can specify these attributes like any other attributes, by using square brackets: <code>{{ mediawiki.external('disabled') }}</code> or <code>{{ mediawiki.external('readonly') }}</code>.</p>
<table style="border:1px solid #36b; padding:1em; background-color:#fffff4; width:100%;"> <caption style="font-weight:bold; text-align:left;">Example </caption> <tbody> <tr> <td>These rules specify styles for a button that changes dynamically as the user interacts with it: <div style="width:30em;"> <pre>
.green-button {
  background-color:#cec;
  color:#black;
  border:2px outset #cec;
  }

.green-button[disabled] {
  background-color:#cdc;
  color:#777;
  }

.green-button:active {
  border-style: inset;
  }
</pre> </div> <p>This wiki does not support a user interface on the page, so these buttons do not "click". Here are some static images to illustrate the idea:</p> <table style="border:2px outset #36b; padding:1em; background-color:#fff;"> <tbody> <tr> <td> <table> <tbody> <tr> <td><span style="width:8em; height:2em;background-color:#cdc;color:#777;padding:.5em 1em;cursor:default;margin-right:1em;border:2px outset #cec;">Click Me</span></td> <td><span style="width:8em; height:2em;background-color:#cec;padding:.5em 1em;cursor:move;margin-right:1em;border:2px outset #cec;">Click Me</span></td> <td><span style="width:8em; height:2em;background-color:#cec;padding:.5em 1em;cursor:move;margin-right:1em;border:2px inset #cec;">Click Me</span></td> </tr> <tr style="line-height:25%;"> <td> </td> </tr> <tr style="font-style:italic;"> <td>disabled</td> <td>normal</td> <td>active</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <p>A fully functional button also has a dark outline around the entire button when it is the default, and a dotted outline on the face of the button when it has keyboard focus. It might also have a hover effect when the pointer is over it.</p> </td> </tr> </tbody>
</table>
<table style="border:1px solid #36b; padding:1em; background-color:#f4f4f4; margin-bottom:1em;width:100%;"> <caption style="font-weight:bold; text-align:left; margin-top:1em;">More details </caption> <tbody> <tr> <td>For more information about user interfaces in CSS, see <a class="external" href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> in the CSS Specification. <p>There is an example of Mozilla's markup language for user interfaces, XUL, in Part II of this tutorial.</p> </td> </tr> </tbody>
</table>
<h2 id="Action:_Printing_a_document">Action: Printing a document</h2>
<ol> <li>Make a new HTML document, <code>doc4.html</code>. Copy and paste the content from here, making sure that you scroll to get all of it: <div style="width:48em; height:12em; overflow:auto;"> <pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
&lt;HTML&gt;

&lt;HEAD&gt;
&lt;TITLE&gt;Print sample&lt;/TITLE&gt;
&lt;LINK rel="stylesheet" type="text/css" href="style4.css"&gt;&lt;/strong&gt;
&lt;/HEAD&gt;

&lt;BODY&gt;
&lt;H1&gt;Section A&lt;/H1&gt;
&lt;P&gt;This is the first section...&lt;/P&gt;

&lt;H1&gt;Section B&lt;/H1&gt;
&lt;P&gt;This is the second section...&lt;/P&gt;

&lt;DIV id="print-head"&gt;
Heading for paged media
&lt;/DIV&gt;

&lt;DIV id="print-foot"&gt;
Page: 
&lt;/DIV&gt;

&lt;/BODY&gt;
&lt;/HTML&gt;
</pre> </div> </li> <li>Make a new stylesheet, <code>style4.css</code>. Copy and paste the content from here, making sure that you scroll to get all of it: <div style="width:48em; height:12em; overflow:auto;"> <pre>/*** Print sample ***/

/* defaults  for screen */
#print-head,
#print-foot {
  display: none;
  }

/* print only */
@media print {

h1 {
  page-break-before: always;
  padding-top: 2em;
  }

h1:first-child {
  page-break-before: avoid;
  counter-reset: page;
  }

#print-head {
  display: block;
  position: fixed;
  top: 0pt;
  left:0pt;
  right: 0pt;

  font-size: 200%;
  text-align: center;
  }

#print-foot {
  display: block;
  position: fixed;
  bottom: 0pt;
  right: 0pt;

  font-size: 200%;
  }

#print-foot:after {
  content: counter(page);
  counter-increment: page;
  }

} /* end print only */
</pre> </div> </li> <li>View this document in your browser; it uses your browser's default style.</li> <li>Print (or print preview) the document; the stylesheet places each section on a separate page, and it adds a header and footer to each page. If your browser supports counters, it adds a page number in the footer. <table> <tbody> <tr> <td> <table style="border:2px outset #36b;padding:1em;"> <tbody> <tr> <td> <table style="width:15em;margin-right:2em;"> <tbody> <tr> <td> <div style="font-size:110%;text-align:center;margin-bottom:.5em;">Heading for paged media</div> <div style="font-size:150%;font-weight:bold;">Section A</div> <div style="font-size:75%;">This is the first section...</div> <div style="font-size:150%;text-align:right;margin-top:12em;">Page: 1</div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> <td> <table style="border:2px outset #36b;padding:1em;"> <tbody> <tr> <td> <table style="width:15em;margin-right:2em;"> <tbody> <tr> <td> <div style="font-size:110%;text-align:center;margin-bottom:.5em;">Heading for paged media</div> <div style="font-size:150%;font-weight:bold;">Section B</div> <div style="font-size:75%;">This is the second section...</div> <div style="font-size:150%;text-align:right;margin-top:12em;">Page: 2</div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </li>
</ol>
<table style="border:1px solid #36b; padding:1em; background-color:#fffff4;width:100%"> <caption style="font-weight:bold; text-align:left;">Challenges </caption> <tbody> <tr> <td>Move the print-specific style rules to a separate CSS file. <p>Read the {{ CSSXref("@import") }} reference page to find details of how to import the new print-specific CSS file into your <code>style4.css</code> stylesheet.</p> <p>Make the headings turn blue when the mouse pointer is over them.</p> </td> </tr> </tbody>
</table>
<p> <a href="/en/CSS/Getting_Started/Challenge_solutions#Media" title="https://developer.mozilla.org/en/CSS/Getting_started/Challenge_solutions#Media">See solutions to these challenges.</a></p>
<h2 id="What_next?">What next?</h2>
<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a href="/Talk:en/CSS/Getting_Started/Media" title="Talk:en/CSS/Getting_Started/Media">Discussion</a> page.</p>
<p>So far, all the style rules in this tutorial have been specified in files. The rules and their values are fixed. The next page describes how you can change rules dynamically by using a programming language: <strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></strong></p>
<p>{{ CSSTutorialTOC() }}</p>
<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/M\u00e9dias", "pl": "pl/CSS/Na_pocz\u0105tek/Media", "pt": "pt/CSS/Como_come\u00e7ar/M\u00eddia" } ) }}</p>
Revert to this revision