Using two embedded style sheets

A document may contain two embedded style sheets targeted at different media. The styles are differentiated using the media attribute in the style element.

<head>
<style type="text/css"media="screen">
    #printonly {display: none;}
    body {background: #CCC; color: #333; font: 95%;}
    h1 {font: 1.5em Futura, Verdana, sans-serif; color: #C03;}
    p {font: 1em/1.5em Verdana }
</style>
<style type="text/css" media="print">
    #masthead {display: none; }
    #printonly {padding-bottom: 10px; border-bottom: 1px solid;
        font-size: 10pt; }
    body {background: white; color: black; width: auto; }
    h1 {font: 18pt Times bold;}
    p {font: 12pt/18pt Times; }
</style>
</head>

Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial