1. Use Dreamweaver menu Sites -> Manage Site. In the Manage Site dialog, click New and then Site.

2. We will give our site the name coollines and would like to have the files for the site be located on our local disk at c:\coollines. So in the New Site dialog, switch to the Advanced tab and in the Local Info category enter the site name and location...

Leave the other setting by default as shown.

3. Create a new XHTML transitional document by following these steps...

If your Files panel is collapsed, click on its title to expand it.

4. Click the Create button in the above dialog, and you will get an Untitled HTML document as shown. Now do a File -> Save As to save this document with the name of coollines.htm. Note that I happen to have named the document with the htm file extension even though Dreamweaver 8 names documents with the html file extension by default. Both will work.

5. You should now see the new file show up in the Files panel as shown below. We now want to create an external CSS file in a new css subfolder in our site. So to create a new folder in our site, right-click our site in the Files panel and select New Folder as shown below.

6. Create a new CSS file with File -> New and select CSS as shown...

Click Create.

7. You now have an untitled CSS document as shown below. Do File -> Save As and give it the name coollines.css in the css subfolder of our site by following the below steps.

8. You now have both the htm and the css file in your site as shown below. It is now time to link the css file to the htm file. So select the coollines.htm file by clicking on its tab.

9. With the coollines.htm file selected, expand the CSS panel and click on the Attach Style Sheet icon as shown below.

10. The Attach External Style Sheet dialog will appear. Select the coollines.css file as shown below.

11. With Link selected, click the OK dialog to the Attach External Style Sheet dialog.

12. If you look at the code of the htm file, you will see how it references the css file...

13. Now we can write css rules in the coollines.css file that will apply to coollines.htm file. Let's switch to the coollines.css file and type in the following CSS rule.

This rules says to set the body element to have no padding and no margin. Because different browsers might have different default margins and paddings on their document, I always like to use this rule to zero out all the margin and padding so that my HTML document looks consistent across all browsers.

Save the CSS file.

14. Switch to the HTM file and select design view. We'll generate two paragraphs of filler text from the Lorem Ipsum generator site. And copy and paste it into the design view of our HTM file.

Save the HTM file.

15. Preview your document in Internet Explorer browser and Firefox browser.

16. Now you have an coollines.htm file that uses an external stylesheet of coollines.css.