Grow your CSS skills. Land your dream job.

Last updated on:

All Stylesheet Media Types

<link rel="stylesheet" type="text/css" href="print.css" media="print">
all Used for all media type devices
aural Used for speech and sound synthesizers
braille Used for braille tactile feedback devices
embossed Used for paged braille printers
handheld Used for small or handheld devices
print Used for printers
projection Used for projected presentations, like slides
screen Used for computer screens
tty Used for media using a fixed-pitch character grid, like teletypes and terminals
tv Used for television-type devices

Comments

  1. Permalink to comment#

    thank you Mr.Chris Coyier

  2. Nice one Chris, but I m finding for the css code for setting the background image based on the screen resolution as for screens smaller than 1800 width, I have to load the full background of 1800px width. If trick works I would load the smaller image in small resolution screen. Thanks

  3. manoj
    Permalink to comment#

    Good one.. :)

  4. Permalink to comment#

    Sorry, I’ve recently started creating themes for wordpress. I wanna use @media handheld in wordpress.. How do I do this? According to me it has only one stylesheet.

    • WordPress can also have several stylesheets… (as a matter of fact, many plugins add stylesheets to your “head” section anyhow to keep their widget styles consistent). Just go into the “header.php” file of your theme (maybe via the editor built into wp) and look at the header yourself.

      Will probably contain the following code somewhere:
      <link rel="stylesheet" href="” type=”text/css” media=”screen” />

      Then just add the following code:

      and save “styleMedia.css” or whatever you want to name it to the root directory of your theme (or in a seperate css folder if you like, but then don’t forget to add the same foldername to the “path” of your css file.)

      Hope that is of any help…

  5. BAM5
    Permalink to comment#

    You should also include a list of the media features for use in media queries. It would be most helpful.
    http://www.w3.org/TR/css3-mediaqueries/#media1

  6. Cyb'
    Permalink to comment#

    Thanks for shaing this, helped me a lot

  7. Permalink to comment#

    Thank you for another great snippet Chris

  8. Can anybody help me why use
    media? i have badly confusion for mobile & web css

  9. André Huf
    Permalink to comment#

    “aural” is only in HTML 4.01 and “embossed” is only in CSS 2.1

Leave a Comment

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".