CSS Basics w3c
intro | media-types | reset/setup
RULES: css | cascading | @rules
SELECTORS: selectors | properties/values
Media Types
In addition to creating style sheets for documents that are rendered by browsers, style sheets for other media can be created and read by a variety of agents. For some time we have been able to create a separate style sheet for different types of media.
For instance you can select fonts that are suitable for print, change colors that work better for projectors, get rid of images and menus or whatever is needed to make the document more readable for a particular device.
Linking to Different Style Sheets
When linking to specific style sheets you need to indicate the media within the link.
Below are links to style sheets for the screen and print:
<link rel="stylesheet" type="text/css" media="screen" href="screen.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">
@import rule
In order to prevent the user agent from retrieving resources for unsupported media types you can specify media-dependent @import rules within your css.
@import url("name.css") print;
or
@import url("name.css") projector;
etc.
Types
There are ten media types.
For print all you need to do is create a style sheet that would make your document suitable for print. For example you could change the font and its size, add different margins and get rid of the menus and images, whatever would make the page easier to read.
Handheld
Intended for handheld devices which typically have a small screen and limited bandwidth.
Most agents for cell phones and eReaders do not read Handheld CSS correctly.
Media Types did not really catch-on for cell phone and eReaders. Intitially web designers created diffent pages for these devices. More recently web designers have begun to create Responsive Web Design that incorporates Media Queries.
Screen
Primarily for Color Computer Screens.
All
This is the default - All Devices
Braille
Braille tactile feedback devices
Projection
Projected Presentations
http://www.w3.org/TR/CSS2/page.html
Aural / Speech
Speech Synthesizers
http://www.w3.org/TR/CSS2/aural.html
tty
Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities)
http://www.w3.org/TR/CSS2/syndata.html#pixel-units
tv
Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available)