Applying a CSS style to an existing web page

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.

<style type="text/css">

@import url("MAIN LAYOUT.css");

</style>
<p>guest book</p>
<p> </p>
<script src="//www.gmodules.com/ig/ifr?url=http://gadgets.fourthfloorequipment.com/guestbooker.xml&up_gbstr=DEMO&up_respOrder=oldest&up_titleFontSize=14px&up_titleFontColor=black&up_msgFontSize=12px&up_msgFontColor=black&up_linkColor=blue&up_respFontSize=12px&up_respFontColor=red&up_bgcolor=white&synd=open&w=700&h=500&title=MJSNC+Guestbook&border=%23ffffff%7C0px%2C1px+solid+%23998899%7C0px%2C1px+solid+%23aa99aa%7C0px%2C2px+solid+%23bbaabb%7C0px%2C2px+solid+%23ccbbcc&output=js"></script>.twoColFixRtHdr #container #sidebar1 table caption {
font-size: x-large;
}
* {
margin: 0px;
padding: 0px;
height: auto;
width: auto;
}
#wrapper {
margin: auto;
text-align: left;
width: 800px;
background-color: #FFFEE8;
border-top-color: #666;
border-right-color: #666;
border-bottom-color: #666;
border-left-color: #666;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
}
a img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
text-align: center;
}
#wrapper #Logo {
height: 180px;
background-color: #FFFEE8;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
width: 800px;
}
#wrapper #headerImg {
height: 350px;
background-repeat: no-repeat;
background-position: center center;
text-align: center;
vertical-align: middle;
width: 800px;
}

#wrapper #Navigation {
height: 20px;
font-size: 14px;
margin-left: 6px;
width: 800px;
}
#wrapper #bodyarea #left {
width: 700px;
float: none;
padding: 1px;
height: 250px;
clear: none;
overflow: auto;
text-align: center;
border: 0px none #FFF;
background-image: url(../Graphics/footer%20pic.jpg);
background-repeat: no-repeat;
background-position: center center;
vertical-align: middle;
}
#wrapper #bodyarea #footer {
height: 150px;
clear: both;
text-align: center;
background-image: url(../Graphics/MORGAN%27S%20PIC.jpg);
}
p {
font-family: "copperplate gothic light";
font-size: 12px;
font-style: normal;
color: #333;
}
#wrapper #bodyarea table tr td #sidebar {
margin: 0px;
padding: 2px;
float: right;
height: 400px;
width: 250px;
}
#wrapper #headerImgRIGHT {
height: 400px;
width: 400px;
background-color: #0FF;
position: fixed;
color: #36C;
border: medium groove #96F;
}