Splitting css definitions

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • books1999
    #1

    Splitting css definitions

    Howdy all,

    I have the following css code:
    #maincontent_ho lder {
    background: #fff url(../images/bg_raster.gif) no-repeat left bottom;
    width: 726px;
    float: left;
    padding-right: 17px;
    padding-left: 17px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    }
    #maincontent_ho lder p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #8C8C8C;
    font-weight: normal;
    margin-top: 5px;
    display: block;
    width: 535px;
    margin-bottom: 0px;
    }
    #maincontent_ho lder img {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #8C8C8C;
    font-weight: normal;
    padding: 2px;
    clear: left;
    margin: 2px;
    vertical-align: text-top;
    float: left;
    }

    #maincontent_ho lder table {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #8C8C8C;
    font-weight: normal;
    width: 535px;
    margin-left: 2px;
    margin-right: 2px;
    clear: left;
    }

    #maincontent_ho lder h1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #EB9625;
    font-size: 19px;
    font-weight: bolder;
    display: block;
    width:535px;
    line-height: 20px;
    margin: 0px;
    }

    #maincontent_ho lder h2 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: #136798;
    font-size: 18px;
    font-weight: bolder;
    display: block;
    width:535px;
    line-height: 20px;
    margin: 3px 0px;
    }
    #maincontent_ho lder h3 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: #666666;
    font-size: 14px;
    font-weight: bolder;
    display: block;
    width:535px;
    line-height: 20px;
    margin: 0px;
    font-style: italic;
    }

    #maincontent_ho lder ul {
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    margin-left: 0px;
    width: 170px;
    display: block;
    margin-top: 10px;
    }
    #maincontent_ho lder li {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    list-style-position: inside;
    list-style-image: url(../images/squareli.gif);
    }

    #maincontent_ho lder a {color: #136798; text-decoration: none;}
    #maincontent_ho lder a:visited {color: #136798; text-decoration: none;}
    #maincontent_ho lder a:hover {color: #3398C3;text-decoration:
    underline;}
    #maincontent_ho lder a:active {color: #FFFFFF;backgro und-color:#136798}


    All of this is in a style sheet called css_main. I would like to break
    the code is such way so that
    #maincontent_ho lder {
    background: #fff url(../images/bg_raster.gif) no-repeat left bottom;
    width: 726px;
    float: left;
    padding-right: 17px;
    padding-left: 17px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    }
    remains in css_main.css and the rest of the code that relates to that
    layer go to another styleseet that i could link with my WYSIWYG editor
    - yet, i want this styles only to relate to content within the <div
    id="maincontent _holder "> <p>content </p></div>. Is this doable?

    Thank you very much. Also can you please tell me what is the best
    visual tool for designing stylesheets as compared to DW MX 8 - I would
    also appreciate if you could tell me a good book for CSS design.


    Much obliged!

    Tags: None
    • Jim Moe
      #2
      Re: Splitting css definitions

      books1999 wrote:[color=blue]
      >
      > All of this is in a style sheet called css_main. I would like to break
      > the code is such way so that
      > [...]
      > remains in css_main.css and the rest of the code that relates to that
      > layer go to another styleseet that i could link with my WYSIWYG editor
      > - yet, i want this styles only to relate to content within the <div
      > id="maincontent _holder "> <p>content </p></div>. Is this doable?
      >[/color]
      Yes. Move the CSS to a separate file. Add an "@import url(filename);"
      (or <link rel=...>) to the <head> of the page where the CSS applies.

      --
      jmm (hyphen) list (at) sohnen-moe (dot) com
      (Remove .AXSPAMGN for email)

        Comment

        Previous template Next
        Working...