There are two different ways we can attach a style sheet, manually or using Dreamweaver. In the following exercise we’ll cover both.

Before we can begin styling our document prototype there are few things we need to do to prepare.

1. Save a copy of your prototype document in both the resources directory and in the site root (inside the Personal Website folder you created)
2. Rename the file in the site root index.html
3. Open Dreamweaver and make sure you are working in your defined site.
4. Open your index.html file from the files panel.
5. From the file menu select New > Blank Page > CSS (page type)
6. Save the new css doument as screen.css in the assets/style directory.

Manually

Add the following line of code to the head section of your document

[crayon][/crayon]

Dreamweaver

Before we can begin styling our document prototype there are few things we need to do to prepare.

1. On the CSS Panel, click on attach new style sheet button from the bottom right corner of the panel (it looks like a chain link)

2. In the Attach External Style sheet dialog, Browse to the screen.css file in the style folder.
3. Check Add as link.
4. Set Media Type to screen
5. Click Ok
6. Save the index.html file