CSS MEDIA TYPES

One of the most important features of style sheets is that, you can specify separate style sheets for different media types. This is one of the best ways to build printer friendly Web pages — Just assign a different style sheet for the “print” media type.

Some CSS properties are only designed for certain media. For example, the page-break-afterproperty only applies to paged media. However there are several properties that may be shared by different media types, but may require different values for that property. The font-size property for example can be used for both screen and print media, but possibly with different values.

A document usually needs a larger font on a computer screen as compared to the paper for better readability, also sans-serif fonts are considered easier to read on the screen, while serif fonts are popular for printing. Therefore it is necessary to specify that a style sheet, or a set of style rules, applies to certain media types.

Creating Media Dependent Style Sheets

Three methods are commonly used to specify the media dependencies for style sheets:

Method 1: Using the @media At-rules

The @media rule is used to define different style rules for different media types in a single style sheet. It is usually followed by a comma-separated list of media types and the CSS declarations block containing the styles rules for target media.

The style declaration in the example below tells the browser to display body content in 14 pixels Arial font on the screen, but in case of printing it will be in a 12 points Times font. However the value of line-height property is set to 1.2 for both of them:

EXAMPLE

•	@media screen{
•	    body {
•	        color: #32cd32;
•	        font-family: Arial, sans-serif;
•	        font-size: 14px;
•	    }
•	}
•	@media print {
•	    body {
•	        color: #ff6347;
•	        font-family: Times, serif;
•	        font-size: 12pt;
•	    }
•	}
•	@media screen, print {
•	    body {
•	        line-height: 1.2;
•	    }
•	}

Method 2: Using the @import At-rules

The @import rule is another way of setting style information for a specific target media — Just specify the comma-separated media types after the URL of the imported style sheets.

EXAMPLE

1.	@import url("css/screen.css") screen;
2.	@import url("css/print.css") print;
3.	body {
4.	    background: #f5f5f5;
5.	    line-height: 1.2;
6.	}

The print media type in the @import statement instructs the browser to load an external style sheet (print.css) and use its styles only for print media.

Method 3: Using the <link> element

The media attribute on the <link> element is used to specify the target media for an external style sheet within the HTML document.

EXAMPLE

1.	<link rel="stylesheet" type="text/css" media="all" href="css/common.css">
2.	<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css">
3.	<link rel="stylesheet" type="text/css" media="print" href="css/print.css">

In this example the media attribute instructs the browser to load an external style sheet “screen.css” and use its styles only for screen while “print.css” for printing purpose.

Different Media Types

The following table lists the various media types that may used to target different types of devices such as printers, handheld devices, computer screens etc.

Media Type     Description
allUsed for all media type devices.
auralUsed for speech and sound synthesizers.
brailleUsed for braille tactile feedback devices.
embossedUsed for paged braille printers.
handheldUsed for small or handheld devices — usually small screen devices such as mobile phones or PDAs.
printUsed for printers.
projectionUsed for projected presentations, for example projectors.
screenUsed primarily for color computer screens.
ttyUsed for media using a fixed-pitch character grid — such as teletypes, terminals, or portable devices with limited display capabilities.
tvUsed for television-type devices — low resolution, color, limited-scrollability screens, sound available.

Foundation HTML for Navigation

We will start by creating our navigation menu with an HTML unordered list.

EXAMPLE

1.	<ul class="menu">
2.	    <li class="firefox"><a href="#">Firefox</a></li>
3.	    <li class="chrome"><a href="#">Chrome</a></li>
4.	    <li class="ie"><a href="#">Explorer</a></li>
5.	    <li class="opera"><a href="#">Opera</a></li>
6.	    <li class="safari"><a href="#">Safari</a></li>
7.	</ul>

Applying the CSS on Navigation

The following sections will describes you how to convert the simple unordered list given in example above to a spite image based navigation using the CSS.

Step 1: Resetting the List Structure

By default, HTML unordered lists are displayed with bullets. We’ll need to remove the default bullets by setting the list-style-type attribute to none.

EXAMPLE

1.	ul.menu {
2.	    list-style-type: none;
3.	}
4.	ul.menu li {
5.	    padding: 5px;
6.	    font-size: 16px;
7.	    font-family: "Trebuchet MS", Arial, sans-serif;
8.	}

Step 2: Setting Common Properties for Each Links

In this step we will set all the common CSS properties that all links are going to share. Such as, color, background-image, display, padding, etc.

EXAMPLE

1.	ul.menu li a {
2.	    height: 50px;
3.	    line-height: 50px;
4.	    display: inline-block;
5.	    padding-left: 60px; /* To sift text off the background-image */
6.	    color: #3E789F;
7.	    background: url("images/mySprite.png") no-repeat; /* As all link share the same background-image */
8.	}

Step 3: Setting Default State of Each Links

Now, we must define a class for each menu item, because every item in the image sprite has different background-position. For example, Firefox icon is placed at the starting point i.e. top-left corner of the image sprite, so there is no need to shift the background-image. Hence the vertical and horizontal position of the background in this case would be 0. Similarly, you can define background-position for other icons within the image sprite.

EXAMPLE

•	ul.menu li.firefox a {
•	    background-position: 0 0;
•	}
•	ul.menu li.chrome a {
•	    background-position: 0 -100px;
•	}
•	ul.menu li.ie a {
•	    background-position: 0 -200px;
•	}
•	ul.menu li.safari a {
•	    background-position: 0 -300px;
•	}
•	ul.menu li.opera a {
•	    background-position: 0 -400px;
•	}

Step 4: Adding Hover States of Links

Adding hover states owns the same principle as adding the above links. Just move their upper-left corner to the starting point (i.e. top-left corner) of the image sprite as we have done above. You can simply calculate the background-position using the following formula:

Vertical position of hover state = Vertical position of normal state - 50px

As rollover images are just below the default state and height of each icon is equal to 50px. The hover state of icons also doesn’t require a horizontal offset, since there are no pixels before the upper-left corner of them.

EXAMPLE

•	ul.menu li.firefox a:hover {
•	    background-position: 0 -50px;
•	}
•	ul.menu li.chrome a:hover {
•	    background-position: 0 -150px;
•	}
•	ul.menu li.ie a:hover {
•	    background-position: 0 -250px;
•	}
•	ul.menu li.safari a:hover {
•	    background-position: 0 -350px;
•	}
•	ul.menu li.opera a:hover {
•	    background-position: 0 -450px;
•	}

Done! Here is our final HTML and CSS code after combining the whole process:

EXAMPLE

•	<!DOCTYPE html>
•	<html lang="en">
•	<head>
•	<meta charset="UTF-8">
•	<title>Example of Sprite Navigation Menu</title>
•	<style type="text/css">
•	    ul.menu {
•	        list-style-type: none;
•	    }
•	    ul.menu li {
Categories: CSS