Skip to main content
akanick
akanick
Participating Frequently
November 29, 2012
Question

Applying a CSS style to an existing web page

  • November 29, 2012
  • 2 replies
  • 24018 views

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.

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    November 29, 2012

    Link HTML pages to your external style sheet in DW.

    http://alt-web.com/DEMOS/DW-Link-Stylesheet.shtml

    Nancy O.

    Nancy O'Shea— Product User & Community Expert
    akanick
    akanickAuthor
    Participating Frequently
    November 29, 2012

    for some reason, it didn't work.

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    November 29, 2012

    akanick

    If the code pasted above is what you have in your actual external stylesheet, it won't work.

    You cannot have html tags in an external stylesheet.

    All of this needs to be removed from the .css file...

    <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_m  sgFontSize=12px&up_msgFontColor=black&up_linkColor=blue&up_respFontSiz  e=12px&up_respFontColor=red&up_bgcolor=white&synd=open&w=700&h=500&tit  le=MJSNC+Guestbook&border=%23ffffff%7C0px%2C1px+solid+%23998899%7C0px% 2C1px+solid+%23aa99aa%7C0px%2C2px+solid+%23bbaabb%7C0px%2C2px+solid+%2 3ccbbcc&output=js"></script>

    The link in your pages to your external stylesheet should then look like this...

    <link rel="stylesheet" type="text/css" media="screen" href="main_layout.css" />

    You should also replace the space in "main stylesheet.css" with an underscore as shown above.

    MurraySummers
    MurraySummers
    Inspiring
    November 29, 2012

    I have a CSS style saved as  "main layout"

    What does this mean?  Do you mean that you have a CSS stylesheet file that is saved as "main layout.css"?

    Show us what this style is, please, and we'll be able to answer better.

    akanick
    akanickAuthor
    Participating Frequently
    November 29, 2012

    Yes, sir. That is what I meant. How would you like me to show you what the style is?

    akanick
    akanickAuthor
    Participating Frequently
    November 29, 2012

    <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;
    }

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices