CSS can be used to specify styles for different media types using media queries. The most common media types are all, screen, and print. There are five methods for applying styles to different media - using <link> tags, <?xml-stylesheet?> tags, @import rules, and @media rules within CSS. @media rules allow applying different styles for different media types from a single CSS file. This improves performance and maintenance by reducing server hits and links needed in HTML.

1. CSS
MEDIA TYPES

2. CSS can be used to specify
how a document is presented
in different media.

3. We can determine which CSS
rules are given to specific devices
using the media attribute:
<link rel="stylesheet” href="a.css”
type="text/css" media="screen" />
<link rel="stylesheet” href="a.css"
type="text/css" media="print" />

4. So, what are
possible media
types?

5. There are ten media types
defined in CSS 2.1

6. all suitable for all devices
aural for speech synthesizers
braille for Braille tactile feedback devices
embossed for paged Braille printers
handheld for handheld devices
print for print material
projection for projected presentations
screen for color computer screens
tty for teletypes and terminals
tv for television type devices

7. Unfortunately, many of these
media types are not well
supported by devices.
The only safe options are:
all
print
screen

8. Are there
different
methods we
can use?

9. There are five methods that can
be used to specify media
for style sheets.

10. Method 1:
<link> within HTML

11. You can use a <link> element in
the head of your HTML document
to specify the target media of an
external style sheet.
<link rel="stylesheet"
href="a.css" type="text/css"
media=”screen" />

12. You can also specify multiple
media types (each separated with
a comma) using this method:
<link rel="stylesheet"
href="a.css" type="text/css"
media=”screen, print" />

13. You can also specify all media
types or leave the media type out
all together (which defaults the
media type to “all”)
<link rel="stylesheet"
href="a.css" type="text/css"
media="all" />

14. Method 2:
<?xml stylesheet>
within XML

15. You can use <?xml-stylesheet ?>
in the head of your XML document
to specify the target media of an
external style sheet.
<?xml-stylesheet
href="a.css" rel="stylesheet"
media="screen" ?>

16. You can also specify multiple
media types (each separated with
a comma) using this method:
<?xml-stylesheet
href="a.css" rel="stylesheet"
media="screen, print" ?>

17. You can also specify all media
types or leave the media type out
all together (which defaults the
media type to “all”)
<?xml-stylesheet
href="a.css" rel="stylesheet"
media="all" ?>

18. Method 3:
@import within
HTML

19. You can use @import in the head
if your HTML document to specify
the target media of an external
style sheet.
<style type="text/css"
media="screen">
@import "a.css";</style>

20. You can also specify multiple
media types (each separated with
a comma) using this method:
<style type="text/css"
media="screen, print">
@import "a.css";</style>

21. You can also specify all media
types or leave the media type out
all together (which defaults the
media type to “all”)
<style type="text/css"
media="all">
@import "a.css";</style>

22. Warning:
@import should be avoided as it
can cause issues in some
versions of Internet Explorer.
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

23. Method 4:
@import within CSS

24. You can specify the target medium
within a CSS file using @import
@import url("a.css") screen;

25. You can also specify multiple
media types (each separated with
a comma) using this method:
@import url("a.css") screen,
print;

26. You can also specify all media
types or leave the media type out
all together (which defaults the
media type to “all”)
@import url("a.css") all;

27. Media-types within @import
rules are not supported by IE5,
IE6 or IE7. The rule is ignored.

28. Method 5:
@media within CSS

29. You can specify the target medium
within a CSS file using @media
@media screen
{
! body { color: blue; }
}

30. You can also specify multiple
media types (each separated with
a comma) using this method:
@media screen, print
{
! body { color: blue; }
}

31. You can also specify all media
types or leave the media type out
all together (which defaults the
media type to “all”)
@media
{
! body { color: blue; }
}

32. What is this
@media?

33. @media is one of the four
CSS2.1 at rules. At-rules start
with an '@' character followed
immediately by an identifier (such
as “media”).

34. @media rules can sit anywhere
inside an external CSS style
sheet.
body { color: red; }
@media screen
{
! body { color: blue; }
}

35. @media rules include the
@media statement, followed by
an optional media type, followed
by a start and end bracket.
@media screen
{
! /* your rules here */
}

36. Any standard CSS rule can be
added inside these brackets.
@media screen
{
! p { color: red; }
! #nav { float: left; }
! .intro { font-weight: bold; }!
}

37. External style sheets can included
one or more @media rules, each
targeting different devices.
@media screen { }
@media print { }

38. While the entire CSS file will be
parsed by different types of
devices, each device will only
apply the rules assigned to it,
based on the media type.
@media screen { }
@media print { }

39. Note:
If you want to specify more than
one media type inside one CSS
file, make sure your <link> element
uses a media type of “all” or
leave the media type undefined...
<link rel="stylesheet” href="a.css”
type="text/css" media=”all" />

40. Otherwise all the other different
types of devices will not follow
the link to the external style sheet
at all.

41. Why use
@media?

42. The main advantage of @media
is that you can use one CSS file
to control different media.
@media screen { }
@media print { }

43. This means there are less hits to
the server, and only one link in
your HTML files, which makes
maintenance easier.

44. Russ Weakley
Max Design
Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin: linkedin.com/in/russweakley