CSS Media Types

Introduction

CSS provides different Media Types for different purposes. By the use of the Media types, different layouts are used for specific devices. As one layout for handheld devices , one for print and one for screen.

Media types

CSS provide various properties for different media types. Some CSS properties are designed for certain specific Media Types and some properties are designed for different Media Types. For Example , "voice-family" property can not be used for different Media Types. It is only used for aural user agents. But the properties like "font-size" can be used for two media Screen and Print. Values of the property may also Different. Most of the time the documents need a much larger font on screen than to paper. This all different because of the need and requirement. As sans-serif font are easier to read on the screen but serif font are easy to be read on the printed page.

Rule @media

@media rule allow us to use different style rule for different media with in single style sheet.

The media type names are not case-sensitive.

Example

<html>

<head>

    <style>

@media screen,print

  {

  p.test {font-weight:bold;}

  }

@media print

  {

  p.test {font-family:times,serif;font-size:10px;}

  }

 

@media screen

  {

  p.test {font-family:verdana,sans-serif;font-size:14px;}

  }

</style>

</head>

<body>
</body>

</html>
 

Here in style tag we define 3 @media rules

  1. @media screen, print

  2. @media print

  3. @media screen

If you see the code on the screen the font family will be verdana, sans-serif , font-size will be 14px and the font weight will be bold. and if you print the same page then the font family will be times, serif and the font size will be 10px but the font weight will be bold.

 

Ebook Download
View all
Learn
View all