Hello guys!! afternoon, welcome to this new tutorial on Css. In today's tutorial i want to talk about 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 the paper, with a speech synthesizer, with a braille device, etc.
Here are currently the two ways to specify media dependencies for style sheets:
- Specify the target medium from a style sheet with the @media or @import at-rule.
- 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.
Below is a short example:
<style type="text/css">
<!--
@media print {
body { font-size: 12pt }
}
@media screen {
body { font-size: 14pt }
}
@media screen, print {
body { line-height: 1.4 }
}
-->
</style>
<!--
@media print {
body { font-size: 12pt }
}
@media screen {
body { font-size: 14pt }
}
@media screen, print {
body { line-height: 1.4 }
}
-->
</style>
You can also read our tutorial post on: Html Formating
The document language:
In HTML 4.0, the media attribute on the link element specifies the target media of an external style sheet:
Below is a short example:
<style type="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="nova.css">
</head>
<body>
<p>The body of the document</p>
</html>
-->
</style>
<!--
<!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="nova.css">
</head>
<body>
<p>The body of the document</p>
</html>
-->
</style>
You can practice the above code using the Notepad++ for better understanding.
You can also read our tutorial post on: Html Document Structure
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. Following is the list of various media types:
Value
|
Description
|
all
|
Suitable for all devices.
|
aural
|
Intended for speech synthesizers.
|
braille
|
Intended for braille tactile feedback
devices.
|
embossed
|
Intended for paged braille printers.
|
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.
|
projection
|
Intended for projected presentations,
for example projectors or print to transparencies.
|
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.
Alright guys we have come to the end of this tutorial on Css media types. Always feel free to ask questions in areas that you don't understand very well and your questions will be attended to as soon as possible.
Also appreciate this wonderful information shared on this blog by commenting below. Like our facebook page, follow us on google+, and subscribe with us to get our tutorial posts sent directly to your email.
Am also happy to inform you all that very soon i will start my tutorials on javascript, always check up on our updates and invite your friends to this great blog. See you in my next tutorial post, bye for now.