Articles, Blog

Creating an External Stylesheet in Dreamweaver CC

February 22, 2020


So here I have two HTML web pages that are
part of a Dreamweaver Site that I created. Page 1…and Page 2.
We’re going to use CSS to add some formatting to these pages.
So first of all, let’s create a new CSS document. Go to File->New. And choose CSS.
If you know CSS code, you can type it in here to create your formatting styles. But we’ll
leave it blank for now, because we’re going to use Dreamweaver.
Instead, I’ll just Save it. Call it styles.css. Click Save.
And now, let’s go back to Page 1 and add some formatting.
So, go down to the Properties panel and click on
Page Properties. Make sure you’re on the tab that says Appearance (CSS). And we’ll
change… The background color.
And the text color. Click OK.
So now we’ve changed the style of Page 1, but notice that Page 2 is still black and
white. The reason is that Dreamweaver has automatically
added some CSS code to Page 1. This line sets the color of the text, and this line sets
the background color. These are called “styles”. Over on the right, there’s a tab called
“CSS Designer.” And notice that those two styles are also listed here.
And what we want to do is use these styles for all the pages on our website. We could
manually change them on each page…or we can use what’s called an “external stylesheet”.
We’ve already created one—styles.css… So now we need to do two things:
Make sure Page 1 is selected. Then go over here to the CSS Designer panel, and where
it says “Sources”, click the + icon. From here, you could create a new stylesheet,
but we want to attach the one we already created. So choose “Attach Existing CSS File.”
Click Browse to find the style sheet we created, and then click OK. And click OK again. And
“styles.css” appears on the list of Sources. Now let’s go to Page 2 and do the same thing.
So at this point, the styles we need are inside the Page 1 html document.
But we want to move them into styles.css. To do that, select Page 1, and then make sure
that styles.css is visible under Sources. Next, go to where it says Selectors, and you
should see your styles under there. If you don’t, go up and click on

2 Comments

  • Reply HU July 2, 2019 at 7:53 pm

    You’re the only tutorial that actually explained this process simply! You saved me a lot of headache.

  • Reply Ian Ludwig August 29, 2019 at 1:48 am

    <!–when i cut n pasted the CSS from the HTML page to its own style sheet it had weird bugging (line glitches etc) however this way works ace! Thanks for your simple tute!–>

  • Leave a Reply