CSS2 introduced "Media Types" by using the @media rule, which made it possible to define different style rules for different media types. For example, you could have one set of style rules for computer screens, one for printers, one for handheld devices, one for television-type devices, and so on. Unfortunately these media types never got a lot of support by devices, other than the print media type.
CSS3 introduced "Media Queries" which extends the CSS2 media types idea: instead of looking for a type of device, they look at the capability of the device. Using media queries are a popular technique for delivering a tailored style sheet to tablets, iPhone, and Androids. Media queries can be used to check many things, such as:
| Value | Description |
|---|---|
| all | Used for all media type devices |
| Used for printers | |
| screen | Used for computer screens, tablets, smart-phones etc. |
| speech | Used for screenreaders that "reads" the page out loud |
This is a great thing if you want your website to be viewed on a lot of different devices. In my case, I doubt if I would use it much but I'll just cover the basics, in case one day, I need to become more professional!
