Kodokon kodokon.com

Enlazar CSS a una página

Descubre qué es CSS, cómo conectarlo a una página HTML y cómo escribir tu primera regla.

8 min · 3 preguntas

Abrir esta lección en Kodokon

El HTML describe el contenido de una página web: los títulos, los párrafos, las imágenes. El CSS (abreviatura de Cascading Style Sheets, hojas de estilo en cascada) describe su apariencia: los colores, los tamaños, los espacios. Imagina una casa: el HTML son las paredes y las habitaciones; el CSS es la pintura, los muebles y la decoración. Sin CSS, todas las páginas web tendrían el mismo aspecto: texto negro sobre un fondo blanco.

Una regla CSS consta de tres partes. Primero viene un selector: indica qué elementos de la página se ven afectados (por ejemplo, todos los párrafos). Luego, entre llaves { }, vienen una o varias declaraciones. Cada declaración empareja una propiedad (lo que quieres cambiar, como el color) con un valor (la elección que haces, como el rojo), separados por dos puntos : y terminados con un punto y coma ;.

CSS
p {
  color: red;
  font-size: 18px;
}
Una regla CSS: todos los párrafos en rojo, con un tamaño de 18 píxeles.

Leamos esta regla palabra por palabra. p es el selector: apunta a cada elemento <p> de la página, es decir, los párrafos. color es una propiedad que define el color del texto, y red es su valor. font-size define el tamaño del texto, aquí 18px (18 píxeles, la unidad que se usa para medir las pantallas). Hay tres maneras de conectar este CSS a una página HTML. El método recomendado es el archivo externo: el CSS vive en su propio archivo, por ejemplo styles.css, que enchufas al HTML con una etiqueta <link> colocada dentro del <head>.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>This text will be red.</p>
  </body>
</html>
La etiqueta <link> conecta el archivo styles.css con la página.

Segundo método: CSS interno. Escribes las reglas directamente en el HTML, dentro de una etiqueta <style> colocada en el <head>. Es práctico para una prueba rápida, pero los estilos solo se aplican a esa página en concreto. Tercer método: CSS en línea. Escribes las declaraciones directamente en una etiqueta, en un atributo style. Fíjate en que no hay selector ni llaves, ya que el estilo se aplica únicamente a esa etiqueta.

HTML
<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p style="color: blue;">I am blue.</p>
  <p>I am red.</p>
</body>
CSS interno dentro de <style>, y CSS en línea en el primer <p>.

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

  1. En la regla p { color: red; }, ¿qué es color?
    • El selector
    • La propiedad
    • El valor
    • El punto y coma
  2. ¿Qué etiqueta conecta un archivo CSS externo con una página HTML?
    • <style>
    • <css>
    • <link rel="stylesheet" href="styles.css">
  3. ¿Por qué el archivo CSS externo es el método recomendado?
    • Es el único que funciona en el móvil
    • Un único archivo puede dar estilo a varias páginas a la vez
    • Hace que el sitio se programe automáticamente más rápido