Jump to content

dhermanus

Members
 View Profile  See their activity

  • Posts

    4

  • Joined

  • Last visited

 Content Type 

Posts posted by dhermanus

    Nesting CSS ID/Class selector

    in CSS

    Posted

    Hi I also want to ask about Nesting.. :) Here's some materials baout nesting that I don't understand from HTMLDog. It says :

    For example:#top { background-color: #ccc; padding: 1em } #top h1 { color: #ff0; } #top p { color: red; font-weight: bold; } Removes the need for classes or ID's if it is applied to HTML that looks something like this:<div id="top"> <h1>Chocolate curry</h1> <p>This is my recipe for making curry purely with chocolate</p> <p>Mmm mm mmmmm</p> </div> This is because, by separating selectors with spaces, we are saying 'h1 inside ID top is colour #ff0' and 'p inside ID top is red and bold'.This can get quite complicated (because it can go for more than two levels, such as this inside this inside this inside this etc.) and may take a bit of practice.
    If I change the CSS code to :
    #top { background-color: #ccc; padding: 1em } h1 { color: #ff0; } p { color: red; font-weight: bold; }
    This would also give me the same result. :) So why do we need to write it this way?
    #top { background-color: #ccc; padding: 1em } #top h1 { color: #ff0; } #top p { color: red; font-weight: bold; }
    Thanks,Naruto

    CSS Question on ID and Class

    in CSS

    Posted

    Hi I would like to ask. :) Whats the different between ID and class?Here's a quote I've got from the web "The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one."Is this true? Because I tried using ID on more than 1 element... and it works... on TWO elements.eg.

    <html><head><style type="text/css">#top { background-color:red} </style></head><body><div > <h1 id="top">Chocolate curry</h1> <p id="top">This is my recipe for making curry purely with chocolate</p> <p>Mmm mm mmmmm</p> </div></body></html>
    Thanks,Naruto
×
×
  • Create New...