Chapter: Internet & World Wide Web HOW TO PROGRAM - The Ajax Client - Cascading Style Sheets (CSS)

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Media Types - CSS

CSS media types allow a programmer to decide what a page should look like depending on the kind of media being used to display the page.

Media Types

 

CSS media types allow a programmer to decide what a page should look like depending on the kind of media being used to display the page. The most common media type for a web page is the screen media type, which is a standard computer screen. Other media types in CSS 2 include handheld, braille, aural and print. The handheld medium is designed for mobile Internet devices, while braille is for machines that can read or print web pages in braille. aural styles allow the programmer to give a speech-synthesizing web browser more information about the content of the web page. This allows the browser to present a web page in a sensible manner to a visually impaired person. The print media type affects a web page’s appearance when it is printed. For a complete list of CSS media

types, see http://www.w3.org/TR/REC-CSS2/media.html#media-types.

 

Media types allow a programmer to decide how a page should be presented on any one of these media without affecting the others. Figure 5.13 gives a simple example that applies one set of styles when the document is viewed on the screen, and another when the document is printed. To see the difference, look at the screen captures below the paragraph or use the Print Preview feature in Internet Explorer or Firefox.

In line 11, we begin a block of styles that applies to all media types, declared by @media all and enclosed in curly braces ({ and }). In lines 13–18, we define some styles for all media types. Lines 20–27 set styles to be applied only when the page is printed, beginning with the declaration @media print and enclosed in curly braces.

 

The styles we applied for all media types look nice on a screen but would not look good on a printed page. A colored background would use a lot of ink, and a black-and-white printer may print a page that’s hard to read because there isn’t enough contrast

 

      <?xml version = "1.0" encoding = "utf-8"?>

 

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

      <!-- Fig. 5.13: mediatypes.html -->

 

      <!-- CSS media types. -->

 

      <html xmlns = "http://www.w3.org/1999/xhtml">

 

      <head>

 

      <title>Media Types</title>

 

        <style type = "text/css">

 

        @media all

{

body   { background-color: #4488aa }

h1       { font-family: verdana, helvetica, sans-serif;

            color: #aaffcc }

p          { font-size: 12pt;

            color: white;

            font-family: arial, sans-serif }

        } /* end @media all declaration. */

 

        @media print

{

body   { background-color: white }

h1       {           color: #008844}

p          {           font-size: 14pt;

                        color: #4488aa;

                        font-family: "times new roman", times, serif }

        } /* end @media print declaration. */

 

        </style>

 

        </head>

 

        <body>

 

        <h1>CSS Media Types Example</h1>

        <p>

 

        This example uses CSS media types to vary how the page

 

        appears in print and how it appears on any other media.

 

        This text will appear one font on the screen and a

 

        different font on paper or in a print preview. To see

 

        the difference in Internet Explorer, go to the Print

 

        menu and select Print Preview. In Firefox, select Print

 

        Preview from the File menu.

        </p>

 

        </body>

 

</html>


Fig. 5.13 |  CSS media types.

between the colors. Also, sans-serif fonts like arial, helvetica, and geneva are easier to read on a screen, while serif fonts like times new roman are easier to read on paper.

To solve these problems, we apply specific styles for the print media type. We change the background-color of the body, the color of the h1 tag, and the font-size, color, and font-family of the p tag to be more suited for printing and viewing on paper. Notice that most of these styles conflict with the declarations in the section for all media types. Since the print media type has higher specificity than all media types, the print styles override the styles for all media types when the page is printed. Since the font-family property of the h1 tag is not overridden in the print section, it retains its old value even when the page is printed.

 

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.