How to stop my css declaration from being overridden

Question

I have a div with classes of A B C
I added a style to c to show the color as "Red";
The problem is it's overridden from the styles of A and B.

I read that !important only prevents the css being overridden by the inline style but does not prevent the override by other css.

How do I mark the style of C as the strongest?

Answer 1

Increase the specificity of rule C above that of rules A and B. Normally I would include some explanation here, but the one over at the linked site is superb.

Answer 2

An !important declaration provides a way for a stylesheet author to give a CSS value more weight than it naturally has. It should be noted here that the phrase “!important declaration” is a reference to an entire CSS declaration, including property and value, with !important added.

Here is a simple code example that clearly illustrates how !important affects the natural way that styles are applied:

#example {
        font-size: 14px !important;
    }

    #container #example {
        font-size: 10px;
    }

In the above code sample, the element with the id of “example” will have text sized at 14px, due to the addition of !important.