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. User Avatar
    pramod
    Permalink to comment#

    thank you Mr.Chris Coyier

  2. User Avatar
    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. User Avatar
    manoj
    Permalink to comment#

    Good one.. :)

  4. User Avatar
    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.

    • User Avatar
      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. User Avatar
    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. User Avatar
    Cyb'
    Permalink to comment#

    Thanks for shaing this, helped me a lot

  7. User Avatar
    Sam
    Permalink to comment#

    Thank you for another great snippet Chris

  8. User Avatar
    Shahbaz Ahmed Bhatti
    Permalink to comment#

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

  9. User Avatar
    André Huf
    Permalink to comment#

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

  10. User Avatar
    Robert
    Permalink to comment#

    This is outdated.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag