Handling Conflicting Styles

it’s common for 2 or more CSS rules to end up applying different styles to the same element

for example:

.warning {
    background-color: red;
}

p {
    background-color: yellow;
}

what color is the following paragraph?

<p class="warning">Sometimes it is unclear what style should apply to an element.</p>

it’s a p element, so the p CSS rule says the background should be yellow

but it also has class warning, so the .warning rules says the background should be red

answer: this paragraph’s background color is displayed as red

the rules for how CSS determine which style wins out turn out to be quite complex, and they can be difficult to debug

Elements of the Cascade

CSS stands for “cascading style sheets”, and cascade gives a hint about how CSS determines which styles to apply when there are conflicts

CSS use three main things when determining the order in which styles are applied:

  1. Importance
  2. Specificity
  3. Source order

these three things are listed in order of importance

Importance

you can force a style to be used by adding !important after a value (and before the ;)

for instance, we can force the example above to make the paragraph yellow like this:

.warning {
    background-color: red;
}

p {
    background-color: yellow !important;
}

in general, using !important is not a good idea because it changes the basic rules that CSS uses for determining styles and makes debugging harder

you should only use it as a last resort, when no other way of changing a style is possible

More Declaration Rules

where styles are declared also influences which ones are used

the following rules are applied in the order they’re given, with later rules over-riding earlier ones:

  1. The browser’s default styles, used when no other styling is set).
  2. Custom styles set by the user of a web browser.
  3. Styles created by the web developer (i.e. the styles we, as the website makers, create).
  4. “Important” declarations in websites styles
  5. “Important” declarations in the web browser users styles

Specificity

roughly speaking, specificity is a measure of how many elements a selector could potentially match

for example, the p element selector has a lower specificity than the .warning class selector

that’s because p only matches p elements, while .warning could match any element with warning in its class attribute (which could include p elements, and more)

specificity rules are what determine the color of the paragraph in the above example:

.warning {
    background-color: red;
}

p {
    background-color: yellow;
}

in CSS, the specificity of the .warning class selector is higher than the specificity of the p element selector

thus, the .warning style wins out because it has higher specificity

please see the section on specificity in this article to see the precise rules for determining specificity

in practice, it’s probably not necessary to know the details of how specificity scores are calculated

although in complex websites it may sometimes be necessary to dig into the rules to figure out what exactly is going on

Source Order

specificity and importantance are not enough to break all possible CSS ties

for example, consider this:

p {
    background-color: red;
}

p {
    background-color: yellow;
}

what’s the background color of this paragraph?

<p>Sometimes it is unclear what style should apply to an element.</p>

answer: yellow, because the yellow styles occurs last in the list of styles

if you change the order of the two p rules so that red is last, then the paragraph would have a red background

keep in mind that this source order rule only applies to styles that have the same specificity, and where !important is not used

Inheritance

recall that HTML documents are stored as a DOM tree in a browser, i.e. a hierarchical tree of elements

for instance:

<body>
   <p>Hello!</p>
</body>

here, the p element is a child of the body element

or we might instead say body is the parent of p

in CSS, sometimes styles that apply to a parent element will be inherited by the child element, and sometimes they won’t

which properties are inherited and which are not is specified by CSS, and they are based on common cases where it seems useful to inherit a property and where it doesn’t

you can often guess whether or not a property is inherited, but in general you need to check a CSS reference to be sure

for example, the font-style property is inherited, as you can see by looking at the top of its reference page

in contrast, the border property is not inherited (border reference)

three special property values can be used to control how inheritance works in CSS: inhert, initial, and unset

the inherit property sets an element’s style value to be the same as the style of its parent

the initial property sets an element’s style to be the default style supplied by the browser; if there is no default style for the element, then it instead acts like inherit

the unset property makes a property act like inherit if it is inherited, and initial otherwise