Conceptos básicos

CSS (Cascading Style Sheets) es el lenguaje utilizado para definir la presentación visual de documentos HTML. Permite controlar aspectos como los colores, las tipografías, los tamaños, los márgenes, los bordes y la disposición de los elementos en una página web.

Su principal objetivo es separar la estructura y el contenido (HTML) de la presentación (CSS). De esta forma, podemos modificar el aspecto de una página sin necesidad de alterar su estructura HTML.

Además, CSS permite reutilizar estilos, mantener una apariencia homogénea entre diferentes páginas y adaptar el diseño a distintos dispositivos y tamaños de pantalla.

Sintaxis

CSS se organiza mediante reglas, que indican qué elementos HTML deben recibir determinados estilos.

Cada regla CSS está formada por:

• Selector: Identifica los elementos HTML a los que se aplicarán los estilos.
• Bloque de declaraciones: Contiene las declaraciones de estilo, delimitadas por llaves { }.
• Declaración: Está formada por una propiedad y su valor, separados por dos puntos (:) y terminados normalmente con punto y coma (;).
• Propiedad: Indica qué característica visual se desea modificar.
• Valor: Establece el valor que tendrá dicha propiedad.

/* CSS rule */
h1 {
  color: blue;
  font-size: 24px;
}

En este ejemplo:

• h1 es el selector, que selecciona todos los elementos <h1> del documento.
• color: blue; es una declaración que establece el color del texto.
• font-size: 24px; es otra declaración que establece el tamaño de la fuente.
• Las llaves { } delimitan el bloque de declaraciones.

Formas de aplicar CSS

Existen tres formas principales de aplicar CSS a un documento HTML:

Estilos en línea

Se definen directamente en el atributo style de un elemento HTML.

<h1 style="color: blue;">Título</h1>

Estos estilos afectan únicamente al elemento en el que se declaran.

Estilos internos

Se definen mediante una etiqueta <style>, normalmente situada dentro del <head> del documento HTML.

<head>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>

Los estilos internos permiten definir reglas que afectan a distintos elementos de un mismo documento.

Estilos externos

Se definen en un archivo independiente con extensión .css, que se vincula al documento HTML mediante la etiqueta <link>.

<head>
  <link rel="stylesheet" href="styles.css" />
</head>

Contenido del archivo styles.css:

h1 {
  color: blue;
}

Las hojas de estilo externas son la opción habitual y recomendada, ya que permiten reutilizar los mismos estilos en diferentes documentos HTML y facilitan su mantenimiento.

Las tres formas pueden combinarse en un mismo documento. Cuando existen declaraciones que afectan a una misma propiedad de un elemento, CSS utiliza un mecanismo denominado cascada para determinar cuál se aplica.

La cascada en CSS

Cuando varias declaraciones CSS establecen valores diferentes para una misma propiedad de un elemento, la cascada determina cuál prevalece.

Para ello, CSS tiene en cuenta varios factores:

• Origen e importancia: De dónde proceden los estilos y si se han declarado como !important.
• Especificidad: Qué selectores tienen mayor peso.
• Orden de aparición: Cuando los demás factores son equivalentes, prevalece la última declaración.

Por ejemplo:

h1 {
  color: blue;
}

h1 {
  color: red;
}

En este caso, el título aparecerá en rojo, porque ambas reglas tienen la misma especificidad y la segunda aparece después.

El funcionamiento detallado de estos mecanismos se estudiará en el apartado Prioridad CSS.

Herencia

La herencia es un mecanismo de CSS por el que determinadas propiedades pueden transmitir sus valores desde un elemento a sus descendientes.

No todas las propiedades CSS se heredan:

• Propiedades heredables: Algunas propiedades relacionadas con el texto, como color y font-family, se heredan por defecto.
• Propiedades no heredables: Otras propiedades, como margin, padding o border, no se heredan por defecto.

Por ejemplo, consideremos el siguiente HTML:

<body>
  <h1>Título principal</h1>
  <p>Este es un párrafo con <strong>texto destacado</strong>.</p>
</body>

Y el siguiente CSS:

body {
  color: blue;
  font-family: Arial, sans-serif;
}

En este caso, tanto el título como el párrafo y el texto destacado heredarán el color azul y la familia tipográfica definidos en body, siempre que no existan otras declaraciones que determinen valores diferentes.

La herencia permite establecer estilos generales en elementos contenedores y evitar repetir declaraciones en cada uno de sus descendientes.

Selectores

Los selectores CSS permiten identificar los elementos HTML a los que se aplicarán las declaraciones de estilo.

Existen diferentes tipos:

• Selectores de tipo: Seleccionan elementos por su etiqueta HTML, como p, h1 o div.
• Selectores de clase: Seleccionan elementos que contienen una determinada clase, utilizando el prefijo ..
• Selectores de ID: Seleccionan elementos mediante el valor de su atributo id, utilizando el prefijo #.
• Selectores de atributo: Seleccionan elementos según la presencia o el valor de sus atributos.
• Combinadores: Permiten establecer relaciones entre selectores, como descendencia, hijos directos o elementos hermanos.
• Pseudoclases: Seleccionan elementos según determinadas condiciones o estados, como :hover o :focus.
• Pseudoelementos: Permiten seleccionar partes de un elemento o generar contenido, como ::first-line, ::before o ::after.

Ejemplo:

/* Type selector */
p {
  color: blue;
}

/* ID selector */
#main {
  background-color: yellow;
}

/* Class selector */
.button {
  border: 1px solid black;
}

/* Attribute selector */
input[type="text"] {
  background-color: lightgray;
}

/* Pseudo-class */
a:hover {
  color: red;
}

/* Pseudo-element */
p::first-line {
  font-weight: bold;
}

Los selectores pueden combinarse para construir reglas más precisas y seleccionar elementos según su posición, atributos o relaciones dentro del documento HTML.

Especificidad

La especificidad es uno de los mecanismos que utiliza CSS para determinar qué declaración debe aplicarse cuando varias reglas establecen valores diferentes para una misma propiedad de un elemento.

La especificidad depende de los selectores utilizados en cada regla.

Por ejemplo:

• Un selector de ID (#elemento) tiene mayor especificidad que un selector de clase (.elemento).
• Un selector de clase (.elemento) tiene mayor especificidad que un selector de tipo (p).

Consideremos el siguiente ejemplo:

<p id="mensaje" class="destacado">Texto de ejemplo</p>

p {
  color: blue;
}

.destacado {
  color: green;
}

#mensaje {
  color: red;
}

En este caso, el texto aparecerá en rojo, porque el selector #mensaje tiene mayor especificidad que los otros dos selectores.

Sin embargo, la especificidad no es el único factor que determina qué declaración prevalece. CSS utiliza un conjunto de reglas denominado cascada, que también tiene en cuenta otros factores, como el origen, la importancia y el orden de las declaraciones.

Estos mecanismos se estudiarán con mayor detalle en el apartado dedicado a la prioridad CSS.