Cómo incluir CSS

Cómo funciona la hoja de estilos

El navegador aplica CSS en dos pasos: primero lee el HTML y construye el árbol de elementos; luego busca qué reglas CSS aplican a cada elemento y calcula el aspecto final. Para que el navegador encuentre las reglas CSS hay que indicarle dónde están. Hay tres formas de hacerlo.

Qué significa «CSS»

Ahora que has escrito tus primeras reglas, el nombre tiene más sentido. Cascading Style Sheets: cada palabra describe algo concreto sobre cómo funciona el lenguaje.

Hojas hace referencia a que los estilos se definen en un archivo separado, una «hoja», que se aplica a todas las páginas del sitio. Un solo cambio en ese archivo afecta al sitio entero.

Estilo son las reglas que definen la apariencia: color del texto, tamaño de fuente, márgenes, disposición de los elementos en pantalla.

Cascada es el mecanismo que decide qué regla gana cuando varias apuntan al mismo elemento. Lo veremos al final de esta lección.

CSS externo: `<link>`

El método recomendado. El CSS vive en un archivo separado (por ejemplo estilos.css) y se vincula desde el <head> del HTML:

<head>
    <meta charset="UTF-8">
    <title>Mi página</title>
    <link rel="stylesheet" href="estilos.css">
</head>

El atributo rel="stylesheet" es obligatorio: le dice al navegador que el archivo es una hoja de estilos. href acepta rutas relativas o absolutas, igual que en <img> o <a>.

La ventaja del archivo externo es que un mismo CSS puede aplicarse a todas las páginas del sitio. Si cambias el color principal, lo cambias en un solo lugar y afecta a todo. Además, el navegador descarga el CSS una vez y lo guarda en caché: las páginas siguientes cargan más rápido.

El mismo mecanismo sirve para enlazar CSS desde servidores externos, como frameworks o librerías de terceros:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

CSS interno: `<style>`

Las reglas CSS se escriben directamente dentro del <head>, entre etiquetas <style>:

<head>
    <style>
        body {
            font-family: sans-serif;
            background-color: #f5f5f5;
        }
        h1 {
            color: #333;
        }
    </style>
</head>

Es útil para pruebas rápidas o para páginas que son un único archivo HTML. El inconveniente es que esos estilos no se reutilizan en otras páginas del sitio.

CSS en línea: atributo `style`

Se aplica directamente sobre un elemento concreto mediante el atributo style:

<p style="color: darkgreen; font-weight: bold;">Aviso importante</p>

Tiene la prioridad más alta de los tres métodos, pero rompe la separación entre contenido y presentación. Hace el HTML difícil de mantener y los estilos no son reutilizables. Úsalo solo cuando no quede otra opción, por ejemplo al generar HTML desde código que no tiene acceso a la hoja de estilos.

`@import`

@import permite cargar una hoja de estilos desde dentro de otra. Debe colocarse al inicio del archivo CSS:

/* estilos.css */
@import url("tipografia.css");
@import url("colores.css");

body {
    margin: 0;
}

El problema es que el navegador no puede descargar el segundo archivo hasta haber descargado y analizado el primero: las cargas van en serie, no en paralelo. Con <link> múltiple, el navegador las descarga simultáneamente. Por eso @import penaliza el rendimiento y se usa poco en producción. Su uso más habitual hoy es en herramientas de preprocesado CSS.

La cascada: qué estilo gana

CSS significa Cascading Style Sheets: hojas de estilo en cascada. La cascada es el mecanismo que resuelve conflictos cuando varias reglas intentan aplicar estilos distintos al mismo elemento.

El orden de prioridad, de mayor a menor:

CSS en línea (style="..."): gana siempre sobre los demás métodos.
CSS interno (<style>) y externo (<link>): entre ellos gana el que aparezca último en el documento.

Dentro de cada método, si dos reglas del mismo origen apuntan al mismo elemento, gana la que aparece más abajo en el archivo. Y si tienen diferente especificidad (cuán concreta es la regla), gana la más específica independientemente del orden. La especificidad se explica en detalle en la lección de selectores.

La excepción es !important, que fuerza a una regla a ganar sobre cualquier otra:

p { color: red !important; }

Úsalo con mucha moderación: dificulta el diagnóstico de problemas y hace el CSS impredecible.

Google Fonts

Google Fonts es un servicio gratuito que ofrece cientos de tipografías listas para usar en cualquier página web. Es exactamente lo que acabas de ver: una hoja de estilos externa alojada en los servidores de Google. Ve a fonts.google.com, elige una fuente y copia el código que genera:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">

Las dos primeras líneas preconnect le indican al navegador que establezca la conexión con los servidores de Google antes de necesitar la fuente, reduciendo la espera. Una vez enlazada, la fuente se usa en CSS como cualquier otra:

body { font-family: 'Inter', sans-serif; }

El valor de reserva (sans-serif) se aplica si la fuente no puede cargarse. Elige siempre una familia genérica como respaldo, y carga solo los pesos que vayas a usar: cada peso adicional es una descarga extra.

Tu proyecto

Este es el momento del cambio visual. Crea un archivo estilos.css en tu carpeta de proyecto y enlázalo desde el <head> de proyecto.html. De paso, elige una tipografía en Google Fonts y enlázala también:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap">
  <link rel="stylesheet" href="estilos.css">
  <title>Tu nombre</title>
</head>

En estilos.css, empieza con unas pocas reglas que ya marcan la diferencia:

body {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    color: #333;
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem;
}

h1 { font-weight: 600; }
h2 { font-weight: 400; color: #555; }

Guarda y recarga. El mismo HTML de siempre, pero ahora con tipografía propia y márgenes. A partir de aquí cada lección añade reglas a este archivo.

Recapitulación

CSS significa Cascading Style Sheets: hojas (archivo reutilizable para todo el sitio), estilo (reglas de apariencia), cascada (mecanismo para resolver conflictos entre reglas).
CSS se puede incluir de tres formas: archivo externo (<link>), bloque interno (<style> en el <head>) o en línea (atributo style). El archivo externo es el método recomendado por reutilización y caché.
Google Fonts es un servicio gratuito de tipografías que se incluye como cualquier CSS externo. Añade dos líneas preconnect antes del <link> para mejorar el rendimiento. Carga solo los pesos que vayas a usar.
@import carga hojas en serie y penaliza el rendimiento. Preferir múltiples <link>.
La cascada resuelve conflictos: inline > interno/externo (gana el último). La especificidad del selector también influye. !important rompe la cascada y debe usarse con cuidado.

En la próxima lección: selectores CSS básicos y especificidad: cómo apuntar exactamente al elemento que quieres estilizar.

Apuntes sobre Html2