7.6. Estilos en Cascada

CSS son las siglas de Hoja de Estilos en Cascada (Cascading Style Sheet). Esto significa que los estilos se heredan en cascada desde las secciones superiores hasta los elementos que se encuentran dentro de ellas.

Por ejemplo si hay un párrafo dentro de una lista: <li> <p>Párrafo</p> </li> El párrafo heredará los estilos que se han aplicado a la lista.

En este ejercicio vamos a meter un bloque dentro de otro como en una 'Matrioshka' o muñeca rusa, de manera que los bloques interiores van a ir heredando todos los estilos del bloque donde se encuentran metidos.

Ejercicio

Fichero css-cascading.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
   <title> Estilos en cascada </title>

   <link rel="stylesheet" type="text/css"
         href="css-cascading.css" />

</head>

<body>

   <h1> Estilos en cascada </h1>

   <div class="estilo1">
      <p>Primer nivel (color azul)</p>
      <div class="estilo2">
          <p>Segundo nivel (letra grande)</p>
          <div class="estilo3">
              <p>Tercer nivel (fondo amarillo)</p>
          </div>
      </div>
   </div>

</body>
</html>

Fichero css-cascading.css

../_images/css-cascading-css.png

Resultado

../_images/css-cascading-web.png