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


  1. pramod
    Permalink to comment#

    thank you Mr.Chris Coyier

  2. Hiren Khambhayta
    Permalink to comment#

    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. Shan
    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.

    • CiNiTriQs
      Permalink to comment#

      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.

  6. Cyb'
    Permalink to comment#

    Thanks for shaing this, helped me a lot

  7. Sam
    Permalink to comment#

    Thank you for another great snippet Chris

  8. Shahbaz Ahmed Bhatti
    Permalink to comment#

    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

  10. Robert
    Permalink to comment#

    This is outdated.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.