Teoría
Teoría

Cascada

CSS significa «Cascading Style Sheets», es decir, «hojas de estilo en cascada».

La cascada permite que varias reglas CSS, cada una con su conjunto de propiedades, se apliquen al mismo elemento. Algunas de esas declaraciones pueden entrar en conflicto. Por eso existen reglas que determinan los valores finales de las propiedades del elemento.

Por ejemplo, para este elemento:

<p class="text" style="color: red;"></p>

Puede haber estilos al menos en tres lugares:

en el archivo style.css, para los selectores p o .text;
en el atributo style;
en los estilos predeterminados del navegador.

La cascada determina qué declaraciones de estas fuentes se aplicarán al párrafo.

Para entender el orden en que se aplican las propiedades CSS, veremos tres conceptos básicos:

importancia;
especificidad;
orden del código fuente.

Nos centraremos sobre todo en los dos últimos y los estudiaremos por separado.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Cascada</title> <meta charset="utf-8"> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block1"> <p>Una línea de texto en el primer bloque</p> <p class="message">Otra línea de texto en el primer bloque</p> <ul> <li>Primer elemento de la lista</li> <li>Segundo elemento de la lista</li> <li>Tercer elemento de la lista</li> </ul> </div> <div class="block2 message"> <p>Una línea de texto en el segundo bloque</p> <p class="message">Otra línea de texto en el segundo bloque</p> </div> </body> </html>

CSS

body { font-family: "PT Sans", sans-serif; }

ObjetivosRealizado

Asigna a todos los p el tamaño de fuente 11px.
Asigna al bloque .block1 el color de texto #1abc9c.
Asigna a los elementos con la clase message un relleno de 5px, un borde 1px solid #95a5a6 y el color de texto #95a5a6.