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






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.