HTML and CSS Reference
In-Depth Information
Add media queries right into your CSS
There's another way to target your CSS to devices with specific properties: rather
than using media queries in link tags, you can also use them right in your CSS.
Here's an example:
Use the @ med ia rul e…
And then put a ll the rules tha t
apply to device s matching this
query within cu rly braces.
@media screen and (min-device-width: 481px) {
#guarantee {
margin-right: 250px;
@media screen and (max-device-width: 480px) {
#guarantee {
margin-right: 30px;
@media print {
body {
font-family: Times, "Times New Roman", serif;
these rules will be used if the
screen is 480px or less…
p.specials {
color: red;
So, the way this works, only the CSS rules that are specific to a media type are included in
an @media rule. All the rules that are common to all the media types are included in the
CSS file below the @media rules, so that way you don't have any unnecessarily repeated
rules. And, when a browser loads the page, it determines through the media queries the
rules that are appropriate for the page, and ignores any that don't match.
Media queries are an area of active
development by the standards groups,
so keep your eyes on evolving best
practices for targeting devices.
Search WWH ::

Custom Search