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=" te xt/css" media=" sc reen" /> <link rel="stylesheet” href=" a. css" type=" te xt/css" media=" print " /> <link rel="stylesheet” href=" a. css" type=" te xt/css" media=” handheld " />
6. suitable for all devices for speech synthesizers for Braille tactile feedback devices for paged Braille printers for handheld devices for print material for projected presentations for color computer screens for teletypes and terminals for television type devices all aural braille embossed handheld print projection screen tty tv
7. Can you specify more than one at the same time?
8. Yes, you can use multiple media types within the one attribute: <link rel="stylesheet” href=" a. css” type=" te xt/css" media=" sc reen, print" />
13. 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=" te xt/css" media="print" />
17. At-rules start with an ' @ ' character followed immediately by an identifier (such as “media” or “import”).
18. In CSS2.1 there are four possible at-rules : - @charset - @import - @media - @page
19. We are only going to look at @media now, and focus on how it can be used to deliver CSS to printers .
20. @media rules can sit anywhere inside your external CSS style sheet. body { color: red; } @media screen { body { color: blue; } }
21. @media rules include the @media statement, followed by a media type, followed by a start and end bracket . @media screen { }
22. Any standard CSS rule can be added inside these brackets . @media screen { p { color: red; } #nav { float: left; } .intro { font-weight: bold; } }
23. You can specify more than one media type using @media rules. Each media type must be separated by a comma . @media screen, print { p { color: red; } #nav { float: left; } }
25. 1. Different devices (such as browsers, printers and mobiles) will see the <link> element in the HTML file . <link rel="stylesheet” href=" a. css” type=" te xt/css" media=”all" />
27. 3. The CSS file can included one or more @media rules, each targeting a different device . @media screen { } @media print { } @media handheld { }
28. 4. Each device will only read the rules assigned to it , based on the media type. @media screen { } @media print { } @media handheld { }
29. If you want to specify more than one media type inside your CSS file, make sure your <link> element uses a media type of “all” . <link rel="stylesheet” href=" a. css” type=" te xt/css" media=”screen" /> <link rel="stylesheet” href=" a. css” type=" te xt/css" media=”all" />
30. Otherwise all the other different types of devices will not look inside the CSS file at all.
32. The main advantage of @media is that you only need one CSS file, and it can be used to control all the different media . @media screen { } @media print { } @media handheld { }
33. This means there are less hits to the server, and only one link in your HTML files , which makes maintenance easier. <link rel="stylesheet” href=" a. css” type=" te xt/css" media=”print" /> <link rel="stylesheet” href=" a. css” type=" te xt/css" media=”all" />
35. Trying to set up print CSS can often be very frustrating for designers and developers.
36. There are a wide variety of different solutions to deal with: Different operating systems Different browsers Different printers Different colour options
37. There are also a range of printing issues to deal with: Background images not printing Background colors not printing Printing first page only Broken page layouts