Web Publishing III Exercise 2 University of Oregon Libraries

Web Publishing III
Exercise 2

Add Some Class To Your Style

In this exercise, you'll add a class selector and an ID selector to the style sheet in your web page. You'll also convert your embedded style sheet to a linked style sheet. Be sure to view your web page after each change. This allows you to troubleshoot any problems, because you know when they occurred and what you did to cause them.

  1. Edit your style sheet to include an ID selector. This ID selector will create a 10% margin on the left and right:
    #content {
    
       margin: 0 10%;
    
    }

    Now apply this style in the body of your document, using the div element, e.g.

    [content of div]

    Save your file and view it in your browser.

  2. Now add a class selector to your style sheet, defining a background image.
    .sky {
    
       background-image: url(http://library.uoregon.edu/it/webpub/images/sky.jpg);
    
    }

    Note: normally you would use an image on your own web site, but for the purposes of this exercise you can point to an image on our web site. Now apply the class to one of the block-level elements (e.g., paragraph, block quotation, list) in the body of your web page. Example:

    [content of block quotation]

    Save your file and view it in your browser.

  3. Convert your embedded style sheet to a linked stylesheet:
    • Open a new copy of your text editor.
    • Copy the style sheet into the new file. Delete the style container so that only the style sheet rules are included.
    • Save the style sheet file in the same folder as your HTML file. Use a .css extension (e.g., style.css).
    • Now add the following code to the Head of your HTML file:

      Be sure to use the filename you chose for your style sheet, if it's different. Also be sure to delete the embedded style sheet from the Head of your HTML file.

    • Save your HTML file and view it in your browser.

    When would you use an embedded style sheet, and when would you use a linked one? What advantage(s) does a linked style sheet offer over an embedded one?

  4. Publish your page and style sheet to the server, and test it in your browser.

You're done – return to the workshop outline.