WEB noob CSS question

Discussion in 'OT Technology' started by PageJimmy123, Mar 29, 2008.

  1. PageJimmy123

    PageJimmy123 New Member

    Joined:
    May 11, 2006
    Messages:
    2,796
    Likes Received:
    0
    I am a complete newbie to CSS and am learning it from the Apress book called Beginning CSS Web Development: From Novice to Professional. I have a question regarding inheritance. My stylesheet is:

    my HTML is:


    From what I understand, and from what it shows in the book the paragraph contained in the box class (This is another test and This is a test) should show in red, but when I open it in a browser it shows up in blue. If I am explicitely defining that paragraphs, if the class is box, should show up in red, why is it inheriting the color from the container id and shows in blue? What am I doing wrong?
     
  2. gobbles

    gobbles .

    Joined:
    May 6, 2006
    Messages:
    422
    Likes Received:
    0
    Try doing this:

    Code:
    #container{
    padding: 20px;
    border: 1px solid #000;
    background: #CCC;
    color: blue;
    }
    
    .box{
    margin: 10px;
    padding: 20px;
    border: 1px solid #000;
    }
    
    .box p{
    color: red;
    }
    
    By having the color changed /after/ .box p {}, you are resetting every element's color style inside it.
     
  3. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    ID has a higher "specificity" than class does. Meaning, ID's will override classes and the elements within the classes will not inherit the properties of it's parent. However, applying the class to the child element within a class should work.
     
  4. PageJimmy123

    PageJimmy123 New Member

    Joined:
    May 11, 2006
    Messages:
    2,796
    Likes Received:
    0
    aha that makes sense...guess the book forgot to mention it.
     

Share This Page