CSS Media types
CSS media types is an important feature of CSS style sheet which specify how to format or present a document on different media i.e on screen, on paper, with speech synthesizer.
There are following different ways to specify the media dependencies for style sheets:-
- Using @media At-rule
- Using @import At-rule
- Using <link>
Using @media At-rule : The @media rule is used to define different media types(separated by commas) in a single style sheet.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS media types</title>
<style type="text/css">
@media screen{
body {
color: #32cd32;
font-family: Arial, sans-serif;
font-size: 14px;
}
}
@media print {
body {
color: #ff6347;
font-family: Times, serif;
font-size: 12px;
}
}
@media screen, print {
body {
line-height: 1.2;
}
}
</style>
</head>
<body>
<h1>CSS Media Types</h1>
<p><strong>Note:</strong> If you print (or print preview) this page the output of HTML code appears differently than it appears on the screen.</p>
</body>
</html>
Using @import At-rule : 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
@import url("css/screen.css") screen;
@import url("css/print.css") print;
body {
background: #f5f5f5;
line-height: 1.2;
}
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.
Using @import At-rule : The "media" attribute on the <link> element is used to specify the target media for an external style sheet within the HTML document.
<link rel="stylesheet" type="text/css" media="all" href="css/common.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css">
<link rel="stylesheet" type="text/css" media="print" href="css/print.css">
Recognized Media types
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. |
| embossed |
Intended for paged braille printers. |
| hand held |
Intended for hand held devices for e.g 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. |
0 Comment(s)