Editando CSS (sección)

=== Especificidad ===
La ''especificidad'' se refiere a los pesos relativos de varias reglas. Determina qué estilos se aplican a un elemento cuando más de una regla intentan aplicar estilos a ella. Basándose en la especificación, un simple selector (<code>h1</code>, por ejemplo) tiene una especificidad de 1, los selectores de clase tienen una especificidad de 1,0, y los selectores de id una especificidad de 1,0,0. Porque los valores de especificidad no se acarrean como en el [[Sistema decimal de numeración|sistema decimal]], las comas son usadas para separar los "dígitos" (una regla CSS que tiene 11 elementos y 11 clases tiene una especificidad de 11,11, no 121).

Por lo tanto los siguientes selectores de reglas dan como resultado la especificidad indicada:
{| class="wikitable"
|-
! Selectores !! Especificidad
|-
|<code>H1 {color: white;}</code>|| 0, 0, 0, 1
|-
|<code>P EM {color: green;}</code> || 0, 0, 0, 2
|-
|<code>.grape {color: red;}</code>|| 0, 0, 1, 0
|-
|<code>P.bright {color: blue;}</code>|| 0, 0, 1, 1
|-
|<code>P.bright EM.dark {color: yellow;}</code>|| 0, 0, 2, 2
|-
|<code>#id218 {color: brown;}</code>|| 0, 1, 0, 0
|-
|<code>style=" "</code> || 1, 0, 0, 0
|}

==== Ejemplo ====
Considera este documento HTML:
<syntaxhighlight lang="html">
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <style>
        #id{propiedad:valor;}
     </style>
   </head>
   <body>
     <p id="xyz" style="color: blue;">Para demostrar la especificidad</p>
   </body>
 </html>
</syntaxhighlight>
En este ejemplo, la declaración en el atributo <code>style</code> sobrescribe la declaración del elemento <code>&lt;style></code> porque tiene un especificidad más alta.