Estructura de CSS
2.1. Compatibilidad 2.2. Concepto de herencia2.3. Concepto de cascada en CSS

<< Cómo usar CSS Tipografía >>

Para definir un estilo CSS, se utilizan reglas. Una regla debe tener el siguiente formato:

selector { propiedad : valor; }

El selector es el elemento HTML al que vamos a aplicarle un estilo. Por ejemplo, si usamos el selector p estamos seleccionado todos los párrafos de nuestra página. Entre llaves, debemos poner las declaraciones de los estilos como puede ser el color de la letra, el borde de una tabla, etc. Cada declaración estará formada por una propiedad y uno o varios valores asociados a esa propiedad, y cada declaración irá separada por punto y coma.

p {
     color: red; /* Con esta declaración todos los párrafos tendrán el color de letra rojo */
}

Nota: Un comentario en CSS comienzan con /* y finalizan con */ como en la mayoría de los lenguajes de programación. (Ctrl + shift + a)

Si quisiéramos aplicar más estilos al párrafo como puede ser que el texto esté en cursiva, sería:

p {
     color: red; /* Con esta declaración todos los párrafos tendrán el color de letra rojo */
     font-style: italic; /* Debemos separar cada propiedad por punto y coma */
}

Nuestra hoja de estilos tendrá tantas reglas como queramos, si por ejemplo queremos además poner el heading <h1> de color azul sería:

p {
     color: red; /* Con esta declaración todos los párrafos tendrán el color de letra rojo */
     font-style: italic; /* Debemos separar cada propiedad por punto y coma */
}
h1 {
     color: blue; /* Pongo de azul el contenido de la etiqueta h1*/
}

Es importante seguir como en programación una serie de buenas prácticas a la hora de escribir nuestro código para que sea más fácil de leer:

  • Una regla por línea
  • Usa la indentación
  • Después de cada regla usa el punto y coma, aunque el último dentro de un bloque sea opcional.

2.1. Compatibilidad 

Cada día hay más funcionalidades de CSS disponibles, pero no todas ellas son soportadas por todos los navegadores. Con el objetivo de poder saber si alguna propiedad CSS, elemento HTML o funcionalidad de JavaScript hay disponible en X navegador, podemos hacer uso de herramientas como Can I Use, dentro de esta página tendremos:

  • En rojo las características que no están soportadas en dicha versión
  • En amarillo/marrón aquellas características que no están soportadas por completo en dicha versión.
  • En verde las características que sí están soportadas.

Además, si aparece un cuadradito amarillo significa que se puede usar con prefijos y si tiene una bandera es que dicha característica se puede activar mediante flags. Ejemplo

2.2. Concepto de herencia

El término CSS es Cascading Style Sheets (Hoja de Estilos en Cascada). El concepto de herencia y de cascada son las dos características más importantes de CSS. En primer lugar, debemos saber que algunas propiedades de CSS se heredan desde los elementos padres a los hijos modificando el valor que tuvieran por defecto.

Por ejemplo, imaginemos que le aplicamos a la etiqueta <body> un color, haciendo que todos los textos que estén dentro de la etiqueta de nuestro HTML se le aplique dicho color. Por ejemplo:

body {
     color: blue;
}

En este ejemplo estamos haciendo que todos los textos que estén dentro de la etiqueta <body> estén de color azul. Si tenemos una etiqueta <div> con texto en su interior y no tenemos ningún estilo de color para dicho elemento, el texto también aparecerá de color azul. Esto es debido a que la propiedad color en el caso de no darle ningún valor específico pasará a heredar el valor que tenga su elemento padre.

<!DOCTYPE html>
<html lang="es">
     <head>
          <meta charset="UTF-8">
          <title>Aplicando estilos</title>  
          <link rel="stylesheet" href="style.css">        
     </head>
     <body>
          <h1>El título estará en azul</h1>
          <div id="container">
               <p id="destacado">Este párrafo también estará en azul</p>
          </div>
     </body>
</html>

Debemos tener en cuenta que no todas las propiedades se heredan, hay propiedades como son los bordes que no se heredan. Veamos qué pasa si añadimos al ejemplo anterior un borde:

body {
     color: blue;
     border: 2px solid red;
}

Si la propiedad border se heredara todos los elementos que son hijos de <h1> (<body>, <div>, <p>) deberían tener un borde de color rojo, pero si nos fijamos no es así, sólo el <body> de nuestra web tiene esa propiedad. La herencia por tanto no ocurre con todas las propiedades CSS sino con algunas como color o font, a medida que vayamos trabajando con CSS nos iremos familiarizando con esto.

2.2.1. Valores especiales de herencia

Además de los valores de cada propiedad CSS, podemos aplicar unos valores especiales comunes a todas las propiedades existentes de forma que modifiquemos el comportamiento de la herencia para dicha propiedad. Estos valores son:

  • inherit: hereda el valor que tiene la misma propiedad CSS que su elemento padre
  • initial: establece el valor inicial que tenía la propiedad CSS inicialmente.
  • unset: combinación de las dos anteriores, es decir, hereda la propiedad del elemento padre, y en el caso de no existir se le aplica su valor inicial.

Por ejemplo, si queremos que en el ejemplo anterior al <div> se le aplique una propiedad que no se le aplica por defecto (propiedad border del elemento padre que es el <body>):

body {
     color: blue;
     border: 2px solid red;
}
div {
     border: inherit;
}

2.3. Concepto de cascada en CSS

Uno de los conceptos más importantes de CSS es el de cascada. Vamos a ver con un ejemplo qué significa el término de cascada en CSS. Imaginemos que tenemos dentro de nuestra hoja de estilos dos veces el mismo selector (en este caso el <div>)y para cada uno de ellos le hemos dado un valor diferente a la propiedad color.

<!DOCTYPE html>
<html lang="en">
     <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Aplicando estilos</title>
          <link rel="stylesheet" href="style.css">
     </head>
     <body>
          <h1>El título de mi web</h1>
          <div id="container">
               <p id="destacado">¿De qué color estará el párrafo azul o naranja?</p>
          </div>
     </body>
</html>

¿Que ha ocurrido? ¿Qué propiedad se va a aplicar? Si nos fijamos, tenemos dos propiedades color aplicadas al mismo elemento <div> y están al mismo nivel. En este caso la respuesta es fácil: siempre se va a aplicar la última regla definida, la cual va a mezclar las dos propiedades (border y margin) y sobreescribir aquella que esté repetida (color). Es como si en nuestra hoja de estilos tuviéramos lo siguiente:

div {
    /* Se aplica el último valor que se encuentra en el caso de tener 2 
    propiedades con valores distintos */
     color: orange; 
     border: 2px solid red;
     margin: 2px;
}

Este no es el único caso donde podemos ver el concepto de cascada de CSS, más adelante seguiremos viendo cómo saber qué propiedad se aplicará a un mismo elemento si accedemos a él por medio de la etiqueta, de su atributo id y/o de una clase. Antes debemos saber cómo aplicar estilos mediante selectores.

<< Cómo usar CSS Tipografía >>