Estilos en cascada

Uno de los conceptos básicos del CSS, la cascada es un algoritmo utilizado para determinar la prevalencia de algunas reglas CSS sobre otras.

1. Los estilos por defecto

Si no escribimos ni una línea de CSS, los elementos de un documento HTML tienen los estilos que "vienen de fabrica", o sea los estilos por defecto y los estilos específicos de cada navegador.
También los usuarios pueden especificar algunos estilos como por ejemplo el tamaño de fuente.

2. Los atributos de presentación

A continuación en la cascada vienen los atributos de presentación, como por ejemplo los atributos width y height de una imagen o de un elemento SVG.
<img src="emoji.gif" alt="un emoji" height="24" width="24" />
También atributos de presentación son algunos atributos de los elementos SVGstar como fill, stroke, stroke-width . . . etc.
<circle cx="50" cy="75" r="40" stroke="black" stroke-width="4" fill="#6ab150" />
Estos atributos tienen una especificidad muy baja ( 0, 0, 0, 0 ) y son fácilmente sobreescritos con reglas CSS.

3. Las hojas de estilo externas

Utilizando hojas de estilo externas los autores sobreescriben los estilos por defecto y los atributos de presentación.
Para enlazar una hoja de estilos externa utilizamos el elemento <link> en el <head> del documento.
<link rel="stylesheet" type="text/css" href="estilos.css">
Alternativamente podemos utilizar la regla-at @importstar que  permite importar reglas desde otras hojas de estilo. Estas reglas deben preceder a todos los otros tipos de reglas, excepto a las reglas @charset.
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

4. Los estilos del documento

Los estilos del documento (  contenidos dentro de un elemento <style> ) sobreescriben las reglas CSS de las hojas externas i a su turno pueden ser sobreescritos por:

5. los estilos CSS en línea ( inline ).

<div id="cuadrado" style="left:500px;top:10px;" ></div>

6.Trasformaciones, animaciones y transiciones

Para sobreescribir los estilos CSS "inline" podemos utilizar trasformaciones:
#cuadrado{ transform: translate(100px, 50px);}
También podemos utilizar animaciones y transiciones.

6.1. !important

Otra manera de sobreescribir los estilos CSS "inline" es utilizando la instrucción !important:
<div style="background: red;">. . . 
div[style] {/* selecciona los div que tienen un atributo style*/
     background: yellow !important;
}
¡OJO! La declaración !important no tiene una especificidad propia.

6.2. Javascript

Asimismo podemos utilizar javascript para cambiar los estilos en línea de manera dinámica.
cuadrado.setAttribute('style', 'background: blue !important');
¡OJO! En este caso JavaScript borra cualquier otros estilos inline del elemento y los reemplaza con las nuevas reglas.

Especificidad

Los navegadores utilizan la especificidad para decidir que reglas CSS aplicar a los elementos.
La especificidad de un selector tiene 4 niveles: 0, 0, 0, 0

Elementos y pseudo-elementos

La especificidad del selector de un elemento HTML o de un pseudo-elemento es 0, 0, 0, 1
Por ejemplo: ( ::first-letter es un pseudo-elemento )
  p{font-size: 1em;}             /*especificidad = 0, 0, 0, 1*/
  p em {font-style: italic;}     /*especificidad = 0, 0, 0, 2 */

  p{ color:#222; }               /*especificidad = 0, 0, 0, 1*/
  p::first-letter{ color:#f22; } /*especificidad = 0, 0, 0, 2*/

Clases y pseudo-clases y selectores de atributos

La especificidad de una clase o pseudo-clase es 0, 0, 1, 0
Por ejemplo:
h2.colorado {color: red;} /* especificidad = 0, 0, 1, 1 */
También los selectores de atributos tienen la misma especificidad, por ejemplo los encabezados h2 que tengan un atributo title tienen una especificidad = 0, 0, 1, 1. ( 0, 0, 0, 1 por el h2 y 0, 0, 1, 0 por el atributo )
h2[title] {color: #333;} /* especificidad = 0, 0, 1, 1 */

Identificadores ( id )

La especificidad de los identificadores es 0, 1, 0, 0
Por ejemplo:
h2#colorado {color: red;} /* especificidad = 0, 1, 0, 1 */
¡OJO! En este otro caso el encabezado que tiene un atributo id='colorado' y tiene una especificidad 0, 0, 1, 1
h2[id='colorado'] {color: red;} /* especificidad = 0, 0, 1, 1 */

Estilos en línea

Los estilos en línea tienen la más alta especificidad: 1, 0, 0, 0
<h2 style="color:red;">

Algo importante

En CSS podemos utilizar la declaración !important para decir que una declaración es muy importante.
Podemos poner la declaración !inportant en el CSS
h2{
color:red !important;
}
También la podemos poner en un bloque de estilo "inline"
<h2 style="color:red !important;">
La declaración !important no tiene una especificidad propia. CSS evalúa las declaraciones importantes aparte de las declaraciones que no son importantes.

Especificidad 0 y sin especificidad

El selector universal ( * ) tiene especificidad 0, 0, 0, 0
También los atributos de presentación tienen especificidad 0, 0, 0, 0
Los valores heredados de los elementos padres no tienen especificidad alguna, ni tan solo 0, 0, 0, 0
Esto tiene su importancia, ya que los valores con especificidad 0, 0, 0, 0 se imponen sobre los valores heredados de los elementos padres. Por ejemplo:
<p>Este es un párrafo negro que contiene un elemento <span>SPAN</span> rojo.</p>
*{color:#f00}
p{color:black}
En este caso el elemento <span> hereda el color negro del párrafo ( sin especificidad ), pero el selector universal ( especificidad 0, 0, 0, 0 ) dice que todos los elementos tienen color rojo. En este caso el selector con especificidad 0 se impone sobre el valor heredado ( sin especificidad ) y el elemento <span> tiene color rojo.