Cómo añadir CSS

Puedes escribir reglas CSS perfectas y, aun así, no ver ningún cambio si el navegador nunca las carga. En esta sesión verás las tres formas habituales de conectar CSS con HTML y cuál conviene usar por defecto.

¿Cómo se añade CSS a una página HTML?

Hay tres formas: una hoja de estilos externa enlazada desde el head, un bloque interno <style> en el head, o el atributo en línea style en un solo elemento. En sitios reales y proyectos de varias páginas, empieza con un archivo .css externo.

Los tres métodos de un vistazo

Usa esta tabla para elegir método antes de escribir código. En las secciones siguientes verás un ejemplo breve de cada uno.

Hoja de estilos externa (opción recomendada por defecto)

Mantén HTML y CSS en archivos separados. En el head, apunta a tu hoja de estilos con un elemento link; el navegador descarga el archivo CSS y aplica sus reglas.

Escribe las reglas en styles.css, junto al archivo HTML (si el archivo está en una subcarpeta, ajusta el href):

Por qué gana lo externo en el trabajo real

• Una sola hoja de estilos puede dar formato a muchas páginas HTML
• Cambias el aspecto sin tener que buscar estilos entre las etiquetas
• El navegador puede guardar en caché el archivo .css y no pedirlo de nuevo en cada página
• Cuida rel="stylesheet" y un href correcto: un error de escritura en la ruta deja la página sin estilos y sin ningún aviso

CSS interno (<style> en el head)

Para una única página de práctica, puedes escribir las reglas dentro de un elemento <style> en el head. En las sesiones de Introducción y Syntax usamos este patrón para que HTML y CSS estuvieran en un solo archivo.

Cuándo está bien el CSS interno

El CSS interno funciona bien en demos y tareas que deben entregarse en un solo archivo, pero no escala: si copias el mismo bloque <style> en cada página, las versiones acaban desincronizadas y actualizar se vuelve tedioso. Pasa a un archivo externo en cuanto tengas más de una página, o cuando quieras separar mejor contenido y diseño.

CSS en línea (atributo style)

El CSS en línea pone las declaraciones directamente en el elemento mediante el atributo style. No hay selector ni archivo aparte: solo se estiliza ese elemento.

Úsalo con moderación

Los estilos en línea sirven para una comprobación rápida y temporal, pero mezclan presentación y marcado, son difíciles de reutilizar y cuesta más sobrescribirlos después, cuando entran en juego la cascada y la especificidad. Es mejor usar clases en una hoja de estilos. Las reglas para resolver conflictos de la cascada las verás en sesiones posteriores; por ahora, trata lo "en línea" como excepción, no como costumbre.

¿Qué método elegir?

• Construir un sitio o seguir los proyectos de este curso: hoja de estilos externa
• Un archivo de demostración corto en clase: <style> interno es aceptable
• Cambiar un solo elemento unos segundos mientras depuras: lo en línea puede ayudar; después, pasa la regla a la hoja de estilos
  Puedes combinar métodos. Cuando una misma propiedad se define en varios sitios, el navegador sigue las reglas de la cascada (las veremos más adelante). Un buen hábito: guarda los estilos definitivos en el archivo externo y no repartas la misma propiedad entre los tres métodos.

Pruébalo tú mismo

1. Crea howto.html y styles.css en la misma carpeta.
2. En howto.html, añade un head con <link rel="stylesheet" href="styles.css"> y, en el body, un encabezado: <h1 class="hero">How-to practice</h1>.
3. En styles.css, escribe: .hero { color: #0f766e; }. Abre el archivo HTML en el navegador.
4. Cambia el color a #1d4ed8, guarda el archivo CSS y recarga la página: el encabezado debería cambiar de color.
5. Añade temporalmente style="color: #b45309;" al h1, recarga y luego quita el atributo para que vuelva a mandar la hoja de estilos.

Errores comunes

• Poner <link rel="stylesheet" …> en el body por costumbre: debe ir en el head, con el resto de metadatos del documento
• Un error de escritura en href (style.css en vez de styles.css), de modo que el archivo no se carga y la página queda sin estilos
• Olvidar rel="stylesheet" en el elemento link
• Pegar un bloque <style> completo en cada página en lugar de compartir un único archivo externo
• Depender de style en línea para cada color y fuente: el marcado se llena de ruido y es difícil de mantener

Resumen

• Tres formas: hoja de estilos externa, <style> interno y atributo style en línea
• Lo habitual en páginas reales: archivo externo con <link rel="stylesheet" href="…"> en el head
• El CSS interno sirve para practicar en un solo archivo; el en línea, para retoques puntuales poco frecuentes
• Un error en la ruta o la falta de rel son motivos frecuentes de que los estilos "no hagan nada"
• Practica enlazando un archivo .css real, cambiando un valor y recargando la página