Creating & Attaching CSS

An CSS Primer Tutorial

A New CSS DocumentCreate 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 DocumentCreate 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 StylesheetOpen 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.