CSS and multiple media

You might remember, way back when, that I mentioned that your web pages' CSS links can have a MEDIA attribute, which specifies the medium or media to which the style sheet should be applied.

This means you can have one lot of CSS for the screen, and another for - oh, lets say, the printer

it turns out there are ten defined media types:

• all
• aural
• braille
• embossed
• handheld
• print
• projection
• screen
• tty
• tv

Print is the one you'll see most commonly used. You can find out why, and some of the common tricks used in a print media type CSS file, by reading the article: css vs. media

Try it yourself. Add a print css media attribute to your project 1 hompage which strips out the navigation elements, removes the underlines from links and makes them black, sets the background colour to white, sets the text font to something with serifs and (for bonus marks) prints the URL of clickable links next to the original links on the page - then print it out to make sure it works.

The other up-and coming CSS media star is of course: mobile. The Opera browser folks have a good article on producing mobile content called Making Small Devices Look Great

How do you test the other media attributes?

So, we've seen how to test the print media attribute using your printer. How about the others? Well, you could try looking at mobile types on your G3 mobile phone (or if you're poor you can use an online emulator), and I guess you could always try producing braille types on a handy nearby braille embosser

Of course, if you're using Macromedia Dreamweaver 8, you can use the the "View > Toolbars > Style Rendering" menu option to test various media types in the IDE, including what a page looks like if CSS is ignored altogether.

---

thanks to adactio for the image: "CSS Mastery"