Scribd
Upload
2 views

CSSMediatypes

The document discusses CSS media types, which allow style sheets to specify how a document is presented across different media such as screens, paper, and braille devices. It explains the use of the @media rule and the media attribute in HTML to target specific media types, along with examples. Additionally, it lists recognized media types including 'all', 'aural', 'print', and 'screen', highlighting their intended use cases.

Uploaded by

Suresh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

CSSMediatypes

The document discusses CSS media types, which allow style sheets to specify how a document is presented across different media such as screens, paper, and braille devices. It explains the use of the @media rule and the media attribute in HTML to target specific media types, along with examples. Additionally, it lists recognized media types including 'all', 'aural', 'print', and 'screen', highlighting their intended use cases.

Uploaded by

Suresh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

CSS - Media Types

One of the most important features of style sheets is that they specify how
a document is to be presented on different media: on the screen, on paper,
with a speech synthesizer, with a braille device, etc.

We have currently two ways to specify media dependencies for style sheets
−

 Specify the target medium from a style sheet with the @media or @import at-
rules.

 Specify the target medium within the document language.

The @media rule


An @media rule specifies the target media types (separated by commas) of
a set of rules.

Given below is an example −

<style tyle="text/css">

<!--

@media print {

body { font-size: 10pt }

@media screen {

body { font-size: 12pt }

@media screen, print {

body { line-height: 1.2 }

-->

</style>
The Document Language
In HTML 4.0, the media attribute on the LINK element specifies the target
media of an external style sheet −

Following is an example −

<style tyle="text/css">

<!--

<!doctype html public "-//w3c//dtd html 4.0//en">

<html>

<head>

<title>link to a target medium</title>

<link rel="stylesheet" type="text/css" media="print, handheld"


href="foo.css">

</head>

<body>

<p>the body...

</body>

</html>

-->

</style>

Recognized Media Types


The names chosen for CSS media types reflect target devices for which the
relevant properties make sense. They give a sense of what device the
media type is meant to refer to. Given below is a list of various media types
−
Value Description

all Suitable for all devices.

aural Intended for speech synthesizers.

braille Intended for braille tactile feedback devices.

embosse Intended for paged braille printers.


d

handheld Intended for handheld devices (typically small screen, monochrome,


limited bandwidth).

print Intended for paged, opaque material and for documents viewed on
screen in print preview mode. Please consult the section on paged
media.

projection Intended for projected presentations, for example projectors or print to


transparencies. Please consult the section on paged media.

screen Intended primarily for color computer screens.

tty Intended for media using a fixed-pitch character grid, such as


teletypes, terminals, or portable devices with limited display
capabilities.

tv Intended for television-type devices.

NOTE − Media type names are case-insensitive.

You might also like