CSS Media Types

CSS Tutorials : Lesson 14 – Media Types

In this tutorial you will learn about Cascading Style Sheets (CSS) - Media Styles, Internal different media CSS and External CSS files.

CSS adds support for different media types, you can create many styles, and each style defines how the document will be styled when its media type is used.

There are two ways to use a different CSS for different media types in the same document, you can place the style internally in the HTML document, or you can create as many CSS files and link them to the HTML document.

Internal different media CSS

To use internal media CSS, use the “@media” rule, the rule(s) will be inside the < style > elements.

Example:

@media screen
{
p
{
font-size: 12px;
}
}

@media print
{
p
{
font-size: 10px;
}
}

This will set the size of the text of the < p > element to 12 pixels when displayed at the screen, and to 10 pixels when printed.

External CSS files

To use external CSS files, add a < link > element inside the < head > element of the HTML document for every CSS file to be used, add the attribute “media” to the element, and specify the media type that will use this file, media values can be one of the following:

all, aural, braille, embossed, handheld, print, projection, screen, tty, or tv.

Example:

We have two CSS files, the first one is named “screen_style.css”, and it defines how the HTML document will be displayed on screen, the second one is named “print_style.css”, and it defines how the HTML document will be displayed when printed, to use both of them in the HTML document:

< head >
< link rel="stylesheet" type="text/css" media="screen" href="screen_style.css" />< link />
< link rel="stylesheet" type="text/css" media="print" href="print_style.css" />< link />
< /head >

This will use the “screen_style.css” for screen display, and “print_style.css” for printing.

Printing HTML documents always causes problems, with CSS you can specify a printing style and attach it to the document.

CSS has a great support to document printing, it adds many rules that helps in adjusting the printing measures of the document.