Media Specific Selectors

In an earlier tutorial we saw how to attach separate stylesheets to a web page that only apply to a specific media. Specifying the attributes for different media in different stylesheets is not always convenient though. The CSS2 standards therefore provide a means of specifying within the stylesheet itself that specific definitions are only to be applied to certain media.

To specify that an attribute or a group of stylesheet commands are only to be applied for a particular media we use the @media command. Any media type can be specified in this command the same as we could specify within the media attribute of the HTML link tag to attach stylesheets. The @media command goes around the stylesheet commands that are only to be applied for that media. For example:

p {color:red;}
@media print {
  p {color:black;}
}

In the above example the colour of paragraph text will be red except when printing in which case the text will be black. You can of course include more than one stylesheet command within the media block if required.

Note that this much of the media query command is part of the CSS2 specification and it is supported by all current web browsers including IE8.

CSS 3 adds further options to media queries that allow you to be even more specific with what the CSS is targetting. You can add min-width, max-width (both of which refer to the viewport width), max-device-width (which refers to the maximum resolution the device can use), and orientation (portrait or landscape - to work with those devices that allow the display to be used either way around). Note that queries that contain these options will be ignored by Internet Explorer 8.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate