CSS rule not being applied

Question

I know the order of css selectors matters within a style sheet, but does the order of the references to external sheets matter?

I have a page that is referencing 2 sheets. One of the rules in the main sheet is overriding a rule in the other sheet. Rearranging the references hasn't helped. I don't know what to do.

Answer 1

whack an !important after the style you want to enforce.

Example:

p.my-style {
    color:#000;
    text-decoration:none !important;
}

Answer 2

Reference it via an ID. If you already have a containing parent div or something, use this.

#content_column2 .my-style p {}

Answer 3

The !important clause following a property is the sure-fire way to have it take precedence over all others, however you can address it in a different way by understanding the selector's specificity. There's a great primer for the concept of CSS selector specificity here.

Essentially, you will want to make the selector which contains the property that you wish to "win" be much more specific by using ids and a more specific hierarchy of tags/classes/ids

Answer 4

The declaration order is used as a tie breaker when different rules have the same importance, origin (page author, user or user-agent) and specificity. Read section "6.4.1 Cascading order" of CSS 2.1 for details.

If a rule isn't applying, make sure the selector matches and is of equal or higher specificity than other selectors that match the same element. Examine the element in a good CSS debugger.