Enviar artigo por e-mail:

Nome do remetente:

E-mail de destino:

Comentário:
§
Restam-lhe  caracteres

|Sair

The Cascading logic

As you know CSS rules are applied trough a “cascade” logic, meaning that, if you have two (or more) different rules for the same element, the last one will prevail. (all others will remain).

This happens in a very precise way. – Let’s say you define a CSS rule that states that all paragraphs shall be Bold and Blue:

p {
      color:#00f;
      font-weight:bold;
}

And latter on you state that all paragraphs should be Red, and Italic (emphasized):

p {
      color:#f00;
      font-style:italic;
}

The result will be a Red paragraph in Bold Italic!

Why? – Well you added new rules that in the cascading logic, overruled the previous ones, however you didn’t contradict some of the previous rules, like the bold property.
So at the end, they all added-up to create a BIG common rule for all paragraphs.

This BIG common rule does not exist ”physically” as an isolated rule, but could be written as it influences the element’s style – the sum of the precedent non-contradictory rules, like this:

p {
      font-weight:bold;
      color:#00f;
      font-style:italic;
}

Simple!

CSS Specificity

Specificity provides a way to differentiate html elements that could be targeted by more than one CSS rule at the same time. To determine wich will prevail we need to check their specificity.

As a thumb rule we can say that “the more specific will prevail over the more generic and the closest will prevail overall”

Imbedded styles will overrule Attached styles, and Inline styles will overrule all the others.

<link rel="stylesheet" type="text/css" href="myStyles.css">

This is the “farthest” rule from the targeted elements, so this will be bear the weaker rules (although this its the recommend method to apply CSS styles)

The imbedded style bellow iis “Closer” to the targeted elements than the attached above and thus would overrule it:

<style type="text/css">
      .myClass{ … )
</style>

And the inline style:

<p style=””>Lorem</p>

As the “Closest” to the element will overrule all the above!

Bellow we have a specificity example table you can use as a Cheat Sheet: (the real specificity values are not in a base 10, so the presented values are not correct in number, but their hierarchy is correct in genera, wich makes them fully usable)

An example:

<p>lorem</p>

will be overruled by:

<p class="”myClass”">lorem</p>

that in its term will be overruled by:

<p id="”myID”">lorem</p>

(…)

And in the end they whould all be overruled by:

<p style="”color: blue”;">lorem</p>

The inline styles rule!

<p style="”color: blue”;"<lorem</p>

This paragraph will always be blue, since no other element combination as an higher specificity – this is the Closest CSS rule to an element.

Complicated? No! this is plain logic and common sense.
Have fun with CSS!

2 Comments »