pageSUMMARY

How to link a CSS document to a Dreamweaver page.

Linking to a CSS Document in Dreamweaver

Link the CSS file to your template and get to grips with HTML basics

To link your new CSS file to your Dreamweaver template, first open the template document. Open the CSS STYLES window:

WINDOW/CSS STYLES

At the bottom of the CSS Styles window you’ll see a little ‘Attach Style Sheet’ chain link symbol (figure 1). Click it.

CSS Style Sheet Panel

In the Attach External Style Sheet dialogue box:

Click Browse, then the Site Root button in the next window (which’ll navigate to your site root), and finally select your CSS file.

Click Choose.

Back at the Attach External Style Sheet dialogue box, click OK.

At this stage we’re not going to worry about the additional media options - suffice to say that we can utilize different CSS documents to achieve different results from a single page. For example, a new CSS file specifically created to make the page more printer friendly can be attached to the same HTML template or page so that when PRINT… is selected, what prints out is significantly different to what appears on screen.

More of that later.

Once the CSS file has been attached, the file should become visible in the CSS Styles window. Also, with Code or Split view turned on (at the top of the template page) you’ll see that a new line has been added which references the new CSS style file:

<link href="../using-dreamweaver-styles.css" rel="stylesheet" type="text/css" />

This leads nicely onto a simple introduction to HTML.

Linking to a CSS Document in Dreamweaver - End of Article

Go to previous article | Go to Home Page | Go to next article

Feedback required!

Twitter GraphicDesignCV