Exercise : Firebug

Firebug is a Firefox add-on that lets you dynamically examine or modify the content and styling of web pages. After installing it, right-click an element and choose Inspect Element with Firebug. Chrome has similar "Inspect Element" behavior built-in.

Firebug Firebug Firebug

Exercise activities 1

Use Firebug or Chrome to inspect the course web site:

  1. What is the color being used for links?
  2. How many px of margin are used on the right side of general page content?
  3. What is the URL of the "CSE" image in the top-left corner of the page? Change it to point to an image of your choice, such as this one.
  4. Make all headings in the top link bar area italic.
  5. Make the "Announcements" bullets have 3em vertical space between them.
  6. Double the left indentation of the bullets in the "Announcements" list.

Exercise activities 2

  1. Make the overall page's text size smaller by 2pt.
  2. Make the "Syllabus" link green (without affecting any other links).
  3. Delete the two W3C validator images from the page.
  4. Insert a new "Announcements" bullet with any text you like.
  5. Change the instructor's contact information to have the following styles:
    • A green dotted-line border, 2px thick.
    • A light orange background color (lighter than the "orange" HTML color).
    • 1em of spacing inside the element on all sides (should be orange).