En este tutorial daremos una rápida mirada a la prioridad en selectores CSS. Concrétamente, veremos el orden de prioridad entre un selector inline, del propio elemento, class y id. 

Antes de nada, veremos la diferencia entre selectores, atributos, declaraciones y valores en CSS, con un pequeño gráfico.

Element: Es el selector CSS con menos prioridad de los cuatro, si se presenta cualquiera de los tres siguientes, los valores de los atributos repetidos, no se aplicarán. 

Ejemplo: 

p {color:#000;}

Esta línea de código en nuestro CSS, hará que todos los caracteres incluidos en cualquier elemento párrafo, tomen el color negro. 

Class: Este selector tiene más prioridad que el selector element, pero menos que el selector id. 

Ejemplo: 

.colorazul {color:#00F;}

Esta línea de código en nuestro CSS, hará que los caracteres incluidos en todos los elementos que tengan la class "colorazul", tomen por defecto el color de fuente azul.

Id: Este selector tiene más prioridad que class pero menos que los inline.

Ejemplo: 

#colorrojo {color:#F00;}

Esta línea de código en nuestro CSS, hará que los caracteres incluidos en el elemento que tenga el id "colorrojo", tomen por defecto el color de fuente rojo. Al contrario que el selector class, que puede aplicarse a todos los elementos que queramos en la misma página, el selector id sólo puede aplicarse una vez por página.

Inline: Este selector está directamente especificado en el XHTML, no en la hoja de estilos CSS, y se hace mediante una etiqueta <style>. Por lo tanto no es un selector, sino un atributo XHTML. Es el que tiene más prioridad, pero también es el que más ensucia y desordena el código, por lo que no se recomienda su uso.

Ejemplo: 

<p style: "color:#0F0;"> 

El párrafo que contenga este atributo, tendrá todos los caracteres de color verde. 

El ejemplo completo podría ser: 

CSS 

p {color: #000;}

.colorazul {color: #00F;}

#colorrojo {color: #F00;}

HTML 

<p style="color:#0F0;" id="colorrojo" class="colorazul">Texto</p>

La palabra "Texto", tendría cuatro estilos CSS diferentes aplicados, pero como la prioridad la tiene el atributo inline, el texto sale en color verde. 

En un próximo tutorial veremos como saltarnos este orden de prioridades con la declaración "!important".