Creating & Attaching CSS
An CSS Primer Tutorial
A New CSS Document
Create a new CSS Document in Dreamweaver using the “New” option under the File Menu. Choose
CSS for the Page Type and click the “Create” Button.
After the file is created, please switch to code view and you should see something like this:
@charset "UTF-8";
/* CSS Document */
You can delete the existing text as it is not relevant here.
Save the Document
Create a new folder in your Project 3 root folder called “stylesheets”.
Save your new CSS document as styles.css into the new “stylesheets” folder.
Connect Your Stylesheet
Open your index.html file which should be your existing NotMotts page from Project 2.
If not in code view, switch to code view and add an empty line just above your closing head tag, which
should look like this: </head>.
Type the link syntax to connect your HTML document to your brand new CSS document:
<link href="stylesheets/styles.css" rel="stylesheet" type="text/css”>
Save your documents.
I’ll also briefly demonstrate how to do this using the tools existing in Dreamweaver.