HTML and CSS Reference
In-Depth Information
You can browse the complete list of current Internet media types at
iana.org/assignments/media-types/
or refer to a shorter list of some of the most
common ones at
wikipedia.org/wiki/Internet_media_type
You don't always need to declare the content type for every resource. That information is typically sent
automatically by the web server, or may even be embedded in the file itself. However, some types of files
may not be recognized automatically by every browser, and including the content type in a
type
attribute
can let the browser know what kind of data it can expect.
Although the
type
attribute's value is an “Internet media type,” you might prefer (as we do) to use the term
content type
to avoid confusion—the term
media type
refers to something else entirely in CSS.
The Other Media Type (The media Attribute)
When the
link
element links to a style sheet, the optional
media
attribute can indicate the medium for
which that style sheet is intended. This means you can easily tailor your site's layout and design for
different media. For example, you could provide two separate style sheets, one for display on computer
screens and another for use when the page is printed:
<link rel="stylesheet" href="/css/screen-styles.css"
media="screen"
>
<link rel="stylesheet" href="/css/print-styles.css"
media="print"
>
You can also include multiple media types in a single
media
attribute, separated by commas:
<link rel="stylesheet" href="/css/screen-styles.css"
media="screen,projection,tv"
>
There are only a handful of media types you can use as the value of a
media
attribute:
all
: suitable for all devices and media (this is the default, assumed if the
media
attribute is
absent).
braille
: for Braille tactile feedback devices, such as refreshable Braille displays that output text
by mechanically raising small dots through holes in a flat surface.
embossed
: for Braille printers that emboss Braille text into paper.
handheld
: for handheld devices, typically with small screens, low resolution, and limited
bandwidth. The newer classes of smartphones and tablets still have small screens, but also
feature full-color displays of a higher resolution than the mobile phones and PDAs from just a few
years ago. Many modern mobile devices have much more sophisticated web browsers than their
predecessors, and are perfectly capable of displaying style sheets otherwise intended for desktop
screens, so they'll honor the
screen
media type and often ignore
handheld
style sheets.
print
: for paged, printed material as well as documents viewed on screen in “print preview”
mode.
projection
: for projected presentations.
screen
: primarily for color computer screens, like you find with desktop and laptop computers.
