Dreamweaver: Adding an external CSS Styling Sheet to your HTML File

Dreamweaver offers a very simple way to add an external CSS styling sheet to your HTML file. The CSS styling sheet is critical to adding design to your webpage, in other words, making it “pretty.”

While you can link your style sheet to your HTML doc manually typing in – <link href=”yourstylesheet.css” rel=”stylesheet” type=”text/css” media=”screen”> – Dreamweaver make it even easier (as shown below).

1. Once you have your .html file created, you need to create a new .css document.

1. New CSS Doc

2. Once your .css document has been created (as shown below), you need to save it (I called mine stylingexample.css)

2. CSS empty screen6. HTML doc with CSS stylesheet


3. Now, in order to link the two documents together: click ‘Format’ in the top menu, then ‘CSS Styles’, then ‘Attach Style Sheet’:

3. Attach stylesheet


4. And finally, click ‘Browse’ to find your .css file,  select it, and your stylesheet has been linked automatically, with the code embedded in the .html file for you!

5B - CSS 5. Selecting file to attach

~ by oc435 on February 11, 2014.

One Response to “Dreamweaver: Adding an external CSS Styling Sheet to your HTML File”

  1. Best Voice
    Best Procedure
    Best Overall Composition

    I think your post fulfilled all three categories.
    Voice: The instructions are direct, thorough and to the point. The images are clear and are appropriate to the instruction.
    Procedure: Using numbers helps me follow along with the instructions and adding screenshots of every stop makes it easy to follow the instructions.
    Overall composition: I also like there isn’t a lot of text in every instruction which makes it very thorough and direct which I prefer in a tutorial.


Comments are closed.

%d bloggers like this: