CSS specific style for div id descendant

I give for known div, the useful block element used as a container of other elements, that helps us to give more structure to our HTML page.

Here the problem is that we want to specify the style for an element in a specific div in a page without affecting all the other elements of the same type.

We can do that giving a id to the div we want to customize, and specify the style for the element by the div id and the element type.

Say that all the h2 element in our page should be displayed in gray:

h2 { color: gray; }

But we want the h2 element in the "extra" div being blue.

Here is the HTML for that div:

<div id="extra">
<h2>Mocha Cafe Latte, €2.35</h2>
    <p>Espresso, <em>steamed milk</em> and chocolate syrup.</p>
    <blockquote class = "brown">
        It is what you are looking for<br />
        And when you find it<br />
        You gonna love it<br />
    </blockquote>
</div>

And here is how we specify in the CSS how we want this special effect:

#extra h2 { color: blue; }

Just the h2 included in the container having id "extra" would be affected.

A fun book for HTML beginners: Head First HTML. You will find a lot more details on div in its chapter eleven.