CSS H1 effecting whole document instead of in block

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Mitchell Nortje
    New Member
    • Jul 2010
    • 2

    CSS H1 effecting whole document instead of in block

    Hi all,

    He is a snippet of my code:

    Code:
    #column2 h1
    { font-family: arial, sans-serif;
      padding: 16px 0px 5px 0px;
      margin: 0px 0px 12px 0px;
      border-bottom: 1px solid;
      font-size: 150%;
      text-transform: uppercase;
      font-weight: normal;
    }
    
    .box h1
    { font-weight: normal;
      padding: 8px 0px 16px 0px;
      text-transform: uppercase;
    }

    basically, in my html page i have a column and inside that column there is a box. However the column h1 style is formatting the box class h1 too. why is it doing that? is my syntax incorrect
    Last edited by Niheel; Jul 9 '10, 07:27 PM. Reason: please use code tags to display code :)
  • JKing
    Recognized Expert Top Contributor
    • Jun 2007
    • 1206

    #2
    Code:
    #column2 .box h1
    {
    font-weight: normal;
      padding: 8px 0px 16px 0px;
      text-transform: uppercase;
    }
    Add the id infront of your class.

    The box h1 will still inherit the other properties that have not been set.

    Comment

    • Mitchell Nortje
      New Member
      • Jul 2010
      • 2

      #3
      Thanks alot. I was playing around with the code and eventually ended up with the code you posted above. Wish I had came on earlier. Thanks for the reply.

      Comment

      Working...