One of the standout features of style sheets is the ability to tailor them for different media types. This is particularly useful for creating web pages that print well by assigning a specific style sheet for printing.
Some CSS properties are exclusive to certain media. For instance, the page-break-after property only works with paged media. However, there are properties like font-size that can be used for both screen and print media, albeit with different values possibly.
When it comes to font size, documents typically require larger fonts on screens for better readability. Sans-serif fonts are preferred for screen reading, while serif fonts are common for printing. Hence, it's essential to specify which media types your style rules apply to.
There are three main methods for specifying media dependencies in style sheets:
@media RuleThe @media rule enables defining distinct style rules for various media types within a single style sheet. It involves listing media types separated by commas and specifying CSS declarations for each targeted media.
The example below instructs the browser to display body content in 14 pixels Arial font on screens and in 12-point Times font for printing. However, the line-height property remains consistent at 1.2 for both:
@media screen{
body {
color: #32cd32;
font-family: Arial, sans-serif;
font-size: 14px;
}
}
@media print {
body {
color: #ff6347;
font-family: Times, serif;
font-size: 12pt;
}
}
@media screen, print {
body {
line-height: 1.2;
}
}Note: Style rules outside of @media rules apply to all media types covered by the style sheet. At-rules within @media are not valid in CSS2.1.
@import RuleThe @import rule provides an alternative method for specifying style information tailored to specific media, by listing 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 specified in the @import statement prompts the browser to load an external style sheet ("print.css") and utilize its styles exclusively for print media.
Note: All @import statements must appear at the beginning of a style sheet, before any declarations. Any style rule within the style sheet itself supersedes conflicting rules in imported style sheets.
<link> ElementThe media attribute of the <link> element specifies the target media for an external style sheet within an HTML document.
<link rel="stylesheet" media="all" href="css/common.css">
<link rel="stylesheet" media="screen" href="css/screen.css">
<link rel="stylesheet" media="print" href="css/print.css">In this example, the media attribute instructs the browser to load an external style sheet "screen.css" and use its styles only for screen, while "print.css" is for printing purposes.
Tip: The <link> element permits specifying multiple media types (separated by commas, e.g., media="screen, print"), as well as media queries.
The below table outlines different media types utilized to target various devices such as printers, handheld devices, computer screens, etc.
Media Type |
Description |
|---|---|
all |
Applicable to all types of media devices. |
aural |
Intended for speech and sound synthesizers. |
braille |
Designed for braille tactile feedback devices. |
embossed |
Specifically for paged braille printers. |
handheld |
Tailored for small or handheld devices, typically small screen devices like mobile phones or PDAs. |
print |
Targeted at printers. |
projection |
Used for projected presentations, such as projectors. |
screen |
Mainly for color computer screens. |
tty |
Meant for media using a fixed-pitch character grid, like teletypes, terminals, or portable devices with limited display capabilities. |
tv |
Applied to television-type devices, featuring low resolution, color, limited-scrollability screens, with sound available. |
Warning: While there are several media types available, most browsers only support all, screen, and print media types.