Creating an External Stylesheet in Dreamweaver CC

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 <style> to select it. And then you should see your styles. Next, drag-and-drop the styles from here to styles.css. Click and drag. Notice that these styles have now disappeared from our Page 1 code. But if we go to styles.css…there they are.

We just attached the styles.css style sheet to both pages. So now, if we click to Page 2…page 2 has the exact same formatting as Page 1. So now, if I change something on this style sheet…it changes the formatting on all the pages that are linked to it.

https://linkboss.io/?ref=yosezbaez62deke

https://rosebays.aidady.com/book

Video chats have become a comfortable and very effective way to get connected to customers, the best part is that online video chats allow interactions at home and office right.