O'Reilly logo

HTML5 and CSS3: Visual QuickStart Guide, Seventh Edition by Bruce Hyslop, Elizabeth Castro

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Understanding and Implementing Media Queries

As you learned in the section “Using Media-Specific Style Sheets” in Chapter 8, you can target your CSS to specific media types in two ways. (There is a third way, the @import rule, that we didn’t cover, because it affects performance.) To recap, the first way is via the media attribute of the link element; for example, <link rel="stylesheet" href="global.css" media="screen" />, which goes in your page’s head. The second way is with an @media rule in your style sheet:

/* Print style sheet */@media print {    header[role="banner"] nav,    .ad {        display: none;    }}

Media queries enhance the media type methods, allowing you to target your styles to specific device features . They’re particularly ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required