Web Design – Assignment 6

Style Sheets

Watch it

before you begin, please read “Color Theory – The Basics“, you may also find the website “color-hex.com” useful.

To get set up, please:

– Go to your Macintosh HD and duplicate your a2 folder.
– Rename this to a6.
– Open the 5 html files in dreamwear.
– Switch to code view and delete <style> and </style> including the information in between.
– Save & close the documents.

1. In Dreamwever, create a new CSS dowcument

> File > New > CSS

2. In styles pallet select “add New CSS Style”

5-6

3. Selector Tag> “Tag”
-define in current document.
-Tag: body

5-8

4. Define font and background variables and select OK.

5. Save as “default.css” in the a6 >styles folder (you will need to create the “styles” folder.)

6. Close document.

7. Open index.html and “link” the style sheet (from styles pallet) and save it. and update files using this template.

(switch to code view and make sure the css link fall above the </head> tag as below:

<link href=”styles/default.css” rel=”stylesheet” type=”text/css”>
</head>

5-9

8. Open up the remaining 4 files and link the style sheet to them.

9. Open up default.css and change other elements of the body tag, save it, and see how this changes your HTML documents.

10. Change background color, font color, link colors and center the page.

9. Upload a6 folder to the server.