Note to self, style specs attached to CSS ID selectors take precedence over specs attached to CLASS. That makes sense, since semantically, you might have any number of elements inheriting style from a given class, but there shouldn't be multiple elements on a page inheriting from a single ID, right? Except if you assign an ID to a container, elements within that container inherit any element-specific styles attached to that ID.

For example, you decide to have a DIV id="content", not unreasonably, because your page design template has a "banner" area and a "foot" area, with the "content" area sandwiched between. And you decide links ("A" elements) in "content", visited or not, should all be gray with no underline (#content a, a:visited), or black and underlined when you mouse over them (#content a:hover). But then later you decide to populate "content", perhaps programmatically, with a some number of sub-templated blocks, and you want a variable "title" link element that will feature in all blocks to derive its style from a CLASS definition. Not unreasonable, you wouldn't assign the same ID to multiple "title" elements, because ID is intended to uniquely IDentify an element, right? So they must belong to a CLASS. And you decide these links, visited or not, will be red and not underlined; and when you mouse over them they will get underlines and darken to #880000.

Now when the browser renders, it will first apply style specified by the "title" CLASS, namely the red font-color style spec. But it's not finished; next the browser overrides CLASS style specs with ID-specific styles, so the gray font-color attached to "A" elements in the "content" container overrides the red font-color.

As noted earlier, we don't apply the same ID to multiple "title" elements, because that's not the intended use of of the ID attribute. The way to solve this to assign a CLASS name to the "content" container DIV, and hang the general link style spec from the container's CLASS rather than from its ID. It can even be the same name, alá DIV id="content" class="content". Then in the CSS, instead of
#content a, a:visited{ color:gray; font-decoration:none }
...we will use
.content a, a:visited{ color:gray; font-decoration:none }
.title a, a:visited{ color:red; font-decoration:none }

The dot-prefix in .content indicates the class, where the hash-prefix in #content indicated the ID. The signifier conventions may seem arbitrary; it may help to associate the dot signifier with object-oriented languages such as Java(Script), and the hash operator with the named-anchor notation in HTML.

So now, when the browser renders, it is confronted with two conflicting CLASS styles. Assuming both selectors are spec'ed in an external document, the browser resolves them in the order they appear. So to force the "title" CLASS style to override "content" CLASS style, we place that style definition later in the stylesheet document.

If we had also assigned unique IDs to each of the "title" elements, the browser would override again with any ID-specific styles attached to those IDs.