Media Queries and Media Selectors

If you can tell what device or media your site is being viewed on, you can use that information to assign a customized stylesheet. Back in HTML4 there were the following media types that could be listed as part of the <link> tag. So, for instance, you could assign different style rules for displaying your site on a TV screen versus a handheld device. These media types are still in use and they are:

• all
• aural
• braille
• handheld
• projection
• print
• screen
• tty
• tv

With HTML5, you can go a step further and specify rules within the media attribute to detect more specific information such as screen size and orientation. We access this information about the browser via a media query. The following tags are available.