For Monday 3/9: Understanding <div>s, CSS specificity & inheritance
Some of you are wondering what a <div> is. A div is simply a block-level 'container' element that creates a rectangle/ box to 'hold' other HTML elements; in this case, a <div> acts as a parent element holding child elements. In your markup, the child elements are nested inside the div. This means that the child element's opening and closing tags are 'nested inside' the div (or other parent) element's opening and closing tags.
Take a look at Duckett pages 187–188 for further explanation of divs and the corresponding inline container element, <span>.
This 7m:20s video gives an overview of div and section elements (a semantic container element that acts like a div)
Another key concept is the matter of CSS specificity and inheritance. Specificity refers to how classes, IDs—and the nesting thereof—work as selectors in your CSS.
To understand how CSS specificity works, read through Duckett pages 237–240.
Also read through Smashing Magazine's article, "CSS Specificity: Things You Should Know"
And here's a 3m:15s video demo of CSS specificity
Finally, here are 30 CSS Best Practices for Beginners.