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

User Style Sheets - CSS

Users can define their own user style sheets to format pages based on their preferences.

User Style Sheets

 

Users can define their own user style sheets to format pages based on their preferences. For example, people with visual impairments may want to increase the page’s text size. Web page authors need to be careful not to inadvertently override user preferences with defined styles. This section discusses possible conflicts between author styles and user styles.

 

Figure 5.15 contains an author style. The font-size is set to 9pt for all <p> tags that have class note applied to them.

 

User style sheets are external style sheets. Figure 5.16 shows a user style sheet that sets the body’s font-size to 20pt, color to yellow and background-color to #000080.

 

User style sheets are not linked to a document; rather, they are set in the browser’s options. To add a user style sheet in IE7, select Internet Options..., located in the Tools menu. In the Internet Options dialog (Fig. 5.17) that appears, click Accessibility..., check the Format documents using my style sheet checkbox, and type the location of the user style sheet. Internet Explorer 7 applies the user style sheet to any document it loads. To add a user style sheet in Firefox, find your Firefox profile using the instructions at

 

 

      <?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.15: user_absolute.html -->

 

      <!-- pt measurement for text size. -->

 

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

 

      <head>

 

      <title>User Styles</title>

 

        <style type = "text/css">

 

        .note { font-size: 9pt }

 

        </style>

 

        </head>

 

        <body>

 

        <p>Thanks for visiting my website. I hope you enjoy it.

 

        </p><p class = "note">Please Note: This site will be

 

        moving soon. Please check periodically for updates.</p>

 

        </body>

 

</html>


Fig. 5.15 | pt measurement for text size.

 

    /* Fig. 5.16: userstyles.css */

 

    /* A user stylesheet */

  body   { font-size: 20pt;

 

    color: yellow;

 

    background-color: #000080 }

 

Fig. 5.16 |  User style sheet.

 

www.mozilla.org/support/firefox/profile#locate and place a style sheet called userContent.css in the chrome subdirectory.

 

The web page from Fig. 5.15 is displayed in Fig. 5.18, with the user style sheet from Fig. 5.16 applied.

 

In this example, if users define their own font-size in a user style sheet, the author style has a higher precedence and overrides the user style. The 9pt font specified in the author style sheet overrides the 20pt font specified in the user style sheet. This small font




may make pages difficult to read, especially for individuals with visual impairments. You can avoid this problem by using relative measurements (e.g., em or ex) instead of absolute measurements, such as pt. Figure 5.19 changes the font-size property to use a relative measurement (line 11) that does not override the user style set in Fig. 5.16. Instead, the font size displayed is relative to the one specified in the user style sheet. In this case, text enclosed in the <p> tag displays as 20pt, and <p> tags that have class note applied to them are displayed in 15pt (.75 times 20pt).

 

    <?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.19: user_relative.html -->

 

    <!-- em measurement for text size. -->

 

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

 

    <head>

 

    <title>User Styles</title>

      <style type = "text/css">

 

      .note { font-size: .75em }

 

      </style>

 

      </head>

 

      <body>

 

      <p>Thanks for visiting my website. I hope you enjoy it.

 

      </p><p class = "note">Please Note: This site will be

 

      moving soon. Please check periodically for updates.</p>

 

      </body>

 

</html>


Fig. 5.19 | em measurement for text size.

 

Figure 5.20 displays the web page from Fig. 5.19 with the user style sheet from Fig. 5.16 applied. Note that the second line of text displayed is larger than the same line of text in Fig. 5.18.



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


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