these rules will only apply when printing

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Print Styles</title>
  <style type="text/css" media="print">
  body { 
    font-family: "Times New Roman", serif; 
    font-size: 12pt; 
  } 
  
  #nav, #sidebar, #search { 
    display: none; 
  } 
  
  a:link, a:visited { 
    color: blue; 
    text-decoration: underline; 
  } 
  
  #content a:link:after, #content a:visited:after { 
    content: " (" attr(href) ") "; 
  } 
  
  </style>
</head>

<body>

<h1>Print Styles</h1>

<ul id="nav">
  <li><a href="#">Nav Item 1</a></li>
  <li><a href="#">Nav Item 2</a></li>
  <li><a href="#">Nav Item 3</a></li>
</ul>

<form id="search">
  <input type="text" />
  <input type="submit" value="Search" />
</form>

<div id="content">
  <p>This is a test. <a href="http://www.s.com">This is a test. </a>.  </p>
  
  <p><code>This is a test. </code>.</p>
</div>

<div id="sidebar">
  <p>This is a test. .</p>
</div>

</body>
</html>

Related examples in the same category

1.	The media attribute lets you control what styles are applied to whichmedia.
2.	media="all"
3.	media="Screen"
4.	insert a page break in the document for printing purposes.
5.	insert a page break before an element by using page-break-before:always
6.	Link two style files, one for screen, one for print
7.	Language ISO subcode
8.	The media attribute lets you control what styles are applied to which media.

these rules will only apply when printing : media « Style Basics « HTML / CSS

Related examples in the same category