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
  • 24032 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

    So basically, I don't feel like I know what I need to do in this situation. I have created all these pages a while back, and at one time I was fooling around with creating templates, before I learned of the concept of css, and I'm pretty sure I ended up saving some or all of these pages as templates, which was a mistake... The bottom line, it's not a big deal for me to start over. I just don't know which type of file I should use. HTML, CSS, etc...it's all so confusing. I'm self taught with everything I know, and to tell you the truth, I know more about HTML than anything.

    Murray: This is a different page than what I was working with in the previous posts, so, no,  I didn't make the change on this page, because it didn't work on my last page.  By all means, tell me the best direction to go from here, and I'll do it! Thanks in advance.


    Take some time to go through this tutorial, it should help make connecting to an external .css file clear to you...

    http://www.w3schools.com/css/default.asp

    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