Table2CSS logo Table2CSS is a tool that can convert your table-based websites to tableless layouts, replace deprecated HTML tags with modern CSS and reformat your HTML code. Click here for more information

How to style the same HTML document differently on different display devices

Often same website is to be displayed on different devices (desktop computers, mobile phones, smart phones, PDA devices) or printed. These display devices have different screen resolution and color depth.

Obviously the different capabilities of these display (output) devices mean that we should style the same page differently on different devices. A large image header may look good on a PC screen, but most likely it is totally inappropriate for a smart phone with a limited screen size. Naturally the question arises - how to display the same text content on different devices using different styling and/or different images?

The most straightforward approach is to use different web pages with different URLs for different display devices and then to direct different devices to these different URL addresses. However using this method means that we need to design each page in triple - once for the regular desktop version, another time for the mobile (PDA) version and a third time for the printable version.

CSS offers us an elegant solution to this problem - we can use CSS to instruct the browser to apply different CSS rules based on the type of the display device. So we use the same HTML content but style it differently for regular screens, handhelds and printers.

How to actually limit CSS rules based on the media type?

There are several ways to specify media-dependent CSS rules:

Specifying media-dependent rules using a LINK tag and a MEDIA attribute.

You can make a LINK tag optional by specifying a media attribute. In this case the CSS file will be included only if the current display device matches the one specified in the media attribute.

For example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	...
	<link rel="stylesheet" type="text/css" media="screen" href="screen.css">
	<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css">
	<link rel="stylesheet" type="text/css" media="print" href="print.css">
</head>
<body>
	<!-- The header image -->
	<div id="header"></div>
	<!-- The navigation menu -->
	<div id="navigation">...</div>
	...
</body>
</html>

The above code will cause our web page to use the CSS rules from screen.css when displaying the page on screen or when printing it. On the other hand when someone views the page on a mobile phone, the CSS rules in handheld.css will be used. Now lets assume that the contents of the three .css files are:

screen.css :

#header {
	width: 1024px;
	height: 50px;
	background-image: url('background-large.jpg');
}

handheld.css

#header {
	width: 50px;
	height: 20px;
	background-image: url('background-small.jpg');
}

print.css

#header, #navigation {
	display: none;
}

Using the above rules will force the browser to use a large header image and to display a regular navigation menu when displaying the page on a desktop PC. When the page is displayed on a handheld device a much smaller header image will be used, but the navigation menu will be displayed just like on the regular desktop version. On the other hand when the page is printed there will be neither a header image nor a navigation menu.

Specifying media-dependent rules using an @media rule.

Using an @media rule, one can specify media-dependent rules in the same HTML or CSS file. Using @media rules the above example will look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	...
	<style type="text/css">
		@media screen {
			#header {
				width: 1024px;
				height: 50px;
				background-image: url('background-large.jpg');
			}
		}

		@media handheld {
			#header {
				width: 50px;
				height: 20px;
				background-image: url('background-small.jpg');
			}
		}

		@media print {
			#header, #navigation {
				display: none;
			}
		}
	</style>
</head>
<body>
	<!-- The header image -->
	<div id="header"></div>
	<!-- The navigation menu -->
	<div id="navigation">...</div>
	...
</body>
</html>

Specifying media-dependent rules using an @import rule.

The media-dependent @import rule is similar to the first version which uses a LINK tag. In this case our HTML code will be:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	...
	<style type="text/css">
		@import url("screen.css") screen;
		@import url("handheld.css") handheld;
		@import url("print.css") handheld;
	</style>
</head>
<body>
	<!-- The header image -->
	<div id="header"></div>
	<!-- The navigation menu -->
	<div id="navigation">...</div>
	...
</body>
</html>

The contents of the three files (screen.css, handheld.css, print.css) are the same as the ones used in our first example with LINK.

Combining two or more media-dependent definitions

There are some cases when we want to use the same definitions for different media types. E.g. we might want to use the same definitions for the screen and print media. In this case the definitions can be combined as follows:

  • For LINK tags:
    <link rel="stylesheet" type="text/css" media="screen, print" href="common.css">
  • For @media rules:
    		@media screen, print {
    			...
    		}
    		
  • For @import rules:
    @import url('common.css') screen, print;

What output devices can we differentiate with this method?

The CSS specification version 2.1, defines the following media types: all, braille, embossed, handheld, print, projection, screen, speech, tty, tv. Among these media types the most often used ones are:

  • all - For any display device regardless of its type.
  • handheld - A handheld device, e.g. mobile phone, smart phone, PDA, etc.
  • screen - A regular color screen.
  • print - For printed pages.