Cascade

global.css
a   { text-decoration: overline }
p a { color: pink }
a   { background-color: white }
a   { font-weight: bold }
section.css
a   { text-decoration: none }
a   { color: black; background-color: grey }
user.css
a   { text-decoration: underline ! important }
a   { color: blue }
a   { font-weight: normal }
<p>Un <a>lien</a>.</p>
Un lien.

Pour chaque propriété de chaque élément :

  1. Recherche de déclaration s'appliquant, sinon héritage, sinon valeur initiale (font-family...)
  2. Tri par poids : !important visiteur > !important auteur (text-decoration)
  3. Tri par origine : auteur > visiteur > navigateur (font-weight)
  4. Tri par spécificité :
    p          {...}  =  0.0.1
    div p      {...}  =  0.0.2  (color)
    div div p  {...}  =  0.0.3
    div.foo    {...}  =  0.1.1
    div p.foo  {...}  =  0.1.2
    #toto      {...}  =  1.0.0
    <td align="...">  =  0.0.1
    <td style="...">  =  1.0.0
    
  5. Tri par ordre inverse d'apparition (background-color)

Applications

Style global redéfini, par ordre inverse

global.cssbody { background: blue }
section.cssbody { background: red }

Style pour une zone, par spécificité

p      { text-align: justify }
#nav p { text-align: left }

Préférences du visiteur, par poids, origine ou héritage

blink { text-decoration: none ! important }
body  { color: black; background: white }