Applying a CSS style to an existing web page

[akanick]

Hi all.

I have recently updated the look of one of my web pages in my site. I'm looking to update the look of the other pages in my site as well to the same style/look. I have a CSS style saved as  "main layout" that I would like to use to apply the same look my existing pages. I'm working in Dreamweaver CS4. Does anyone know how to go about doing this? I realize that, because the existing page already has a layout applied to it, that the look may not be exactly the same, and that's fine, I can work with it from there if I can get it to that point. I feel like there should be an obvious answer to this, but i can't find one.

Any help is greatly appreciated.

Thanks.

[mhollis55]

Show me the web page on line. And what version of Dreamweaver are you using?

[Jon Fritz]

Your page that viewers go to will be a .html.

The external file with the css for the .html page will be a .css file.

[akanick]

mhollis:

Show me the web page on line. And what version of Dreamweaver are you using?

www.mjsnc.org

Dreamweaver CS4

Jon,

Thanks.

[mhollis55]

Sorry this is delayed. I have been working…

Here's what you do:

Open up Dreamweaver. Go to the defined site for Mifflin Juniata in Dreamweaver.

Pull down File>New…

From the pick list, select Blank Page and choose CSS. Click Create.

That will open up a blank page that has 4 lines of code. Lines 1 and 2 will be:

@charset "UTF-8";

/* CSS Document */

Now, go to the code for your first page, which is what you have been working on.

You'll see the CSS, it starts with:

body  {

          font: 100% Verdana, Arial, Helvetica, sans-serif;

          background: 000000;

          margin: 0;

          padding: 0;

          color: #FFFFFF;

          background-color: #000000;

          border: 10 px;

          background-image: url(<img src="Graphics/blackbg.jpg" width="1024" height="658" />);

}

and continues until

a {

          font-family: Palatino Linotype, Book Antiqua, Palatino, serif;

}

Now, one of the things I do note is that all of this CSS apparently lies between HTML comment markers and I have to wonder about that.

So, once you have pasted all of that into the new style sheet, save it as "styles.css"

Now, you're going to wipe out all of the stuff on that HTML page from line 8 to line 128 and get rid of the </style> closing tag.  The IE conditional stuff can stay.

Next, you want to link your HTML page to the external style sheet thusly.

Go to your Styles panel in Dreamweaver.You'll see a little link icon that looks like a couple of chain links. hover your mouse over that and it will say "attach style sheet" This should be in the Styles panel on the right-hand side of your screen in Dreamweaver CS4. And you want to have the CSS styles tab selected in the top right and not AP elements or Tag inspector selected.

Click on that link.

By default, Dreamweaver will offer to add the file as a link. Click on the "Browse" button and navigate to the styles.css document you just created. Click Choose. In the Media: box, choose all from the list.

Click OK.

Boom! you have just created and attached an external style sheet. Changes to that one style sheet will affect all pages that are linked to it.

Go through the rest of your pages and get rid of the styles that are in the rest of them (except IE conditional ones that begin with:

<!--[if IE 5]>

and end with

<![endif]-->

Now, if you do this on your template (as your documents seem to be based on a template… it should update all pages and clear out the CSS at the top of all of them.

[mhollis55]

Probably be a good idea.

1: You want an EXTERNAL style sheet that is not a web page with HTML in it.

2: You want to link to your stylesheet as Murray suggests in each page.

3: You want to lay out your pages carefully so that you are compliant with W3C standards*

Here are the plusses in having a style sheet be external:

Your client wants you to change something. Change the style and Boom! all pages change. I have done complete websites and had a client say he wants a lighter color for a background, or didn't like my choice of link color. One quick change and you're done and all pages look like that.

An external style sheet loads once for all pages in your website, so it can be stored in the browser's memory and each successive page loads faster.

It keeps CSS out of your HTML page. That's simply better organization.

Since Dreamweaver allows you to have multiple documents open at the same time, you can easily flip back and forth between your CSS and your web page. You can also access your CSS from within the web page, applying style changes that, when you do a Save All will put them into your stylesheet.

*to determine whether or not your page is compliant with W3C Standards, use the Validator.

If you have more questions, you can ask here and we do recommend that you provide a link to the page on your server. It's easier for us to see what is happening.