Media Types

Media types allow different layouts for different devices, such as screen, print, projection, tv, to be specified.


The @media keyword is followed by the media type keyword that you want the rules to apply to.


The following CSS will render <p> elements with a font-size of 16px and a font-weight of bold for the screen, or 10px and bold if printed


@media screen {

p { font-size:16px; }


@media print {

p { font-size:10px; }


@media screen, print {

p { font-weight:bold; }




 Type Description 
all All media types
aural Speech & sound synthesizers
braille Braille tactile feedback devices
embossed Paged braille printers
handheld Small screen handheld devices
print Printers
projection Projected presentations, slides
screen Computer screens
tty Fixed pitch character grid; teletypes, terminals
tv Televisions

Leave a Reply