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

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

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