EIW Exercises: Style Sheets

Inline Style

Grab the web page dmy.html so you can edit it. Add inline style settings so that the following happens:

• There is a background color
• The default for the entire document is green text in some font other than the browser default.
• the "buttons" show up looking more like buttons (for example have bold, red text on a wheat background).
• The nested ordered list items show up with one style and the top-level items have a different style
• The headings each have a different style.
• There is a background image for paragraphs that don't have a class name.

Document-wide style

Do the same thing, but this time don't use any inline styles - instead include the definition of style rules in the head of the document.

External style sheets

1. Move the style rules from the head of the document to an external style sheet. Style sheet files usually end in ".css" !
2. Find an web site that uses external style sheets, and set your document to use their style sheet (find one that makes the document look different!)
3. Create a new HTML document (a small one is fine) that uses some of the styles defined in the external style sheet you found in the last part.