Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Linking External Style Sheets - CSS

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 |

Linking External Style Sheets - CSS

Style sheets are a convenient way to create a document with a uniform theme.

Linking External Style Sheets

 

Style sheets are a convenient way to create a document with a uniform theme. With exter-nal style sheets (i.e., separate documents that contain only CSS rules), you can provide a uniform look and feel to an entire website. Different pages on a site can all use the same style sheet. When changes to the styles are required, the author needs to modify only a sin-gle CSS file to make style changes across the entire website. Note that while embedded style sheets separate content from presentation, both are still contained in a single file, pre-venting a web designer and a content author from working in parallel. External style sheets solve this problem by separating the content and style into separate files.

Figure 5.4 presents an external style sheet. Lines 1–2 are CSS comments. Like XHTML comments, CSS comments describe the content of a CSS document. Comments may be placed in any type of CSS code (i.e., inline styles, embedded style sheets and external style sheets) and always start with /* and end with */. Text between these delim-iters is ignored by the browser.

      /* Fig. 5.4: styles.css */

 

        /* External stylesheet */

 

 

body   { font-family: arial, helvetica, sans-serif }

                       

a.nodec          { text-decoration: none }     

                       

a:hover           { text-decoration: underline }         

                       

li em    { font-weight: bold } 

                       

h1, em            { text-decoration: underline }         

                       

ul         { margin-left: 20px } 

                       

ul ul    { font-size: .8em; }   

Fig. 5.4 |  External style sheet.

 

Figure 5.5 contains an XHTML document that references the external style sheet in Fig. 5.4. Lines 10–11 (Fig. 5.5) show a link element that uses the rel attribute to specify a relationship between the current document and another document. In this case, we declare the linked document to be a stylesheet for this document. The type attribute specifies the MIME type of the related document as text/css. The href attribute pro-vides the URL for the document containing the style sheet. In this case, styles.css is in the same directory as external.html.

     

    <?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.6: external.html -->

 

    <!-- Linking an external style sheet. -->

 

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

 

    <head>

 

    <title>Linking External Style Sheets</title>

 

      <link rel = "stylesheet" type = "text/css"

 

      href = "styles.css" />

 

      </head>

 

      <body>

 

      <h1>Shopping list for <em>Monday</em>:</h1>

 

      <ul>

 

      <li>Milk</li>

 

<li>Bread

<ul>

<li>White bread</li>

<li>Rye bread</li>

<li>Whole wheat bread</li>

      </ul>

 

      </li>

 

      <li>Rice</li>

 

<li>Potatoes</li>

      <li>Pizza <em>with mushrooms</em></li>

 

      </ul>

      <p><em>Go to the</em>

 

      <a class = "nodec" href = "http://www.deitel.com">

      Grocery store</a>

      </p>

 

      </body>

 

</html>



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


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