Recuerdas el caos de los post-its del atributo style? La etiqueta <style> fue un gran avance — todo centralizado en el <head>. Pero hay un problema: estás mezclando el HTML con el CSS en el mismo archivo.
Imagina que eres un arquitecto y metes los planos estructurales del edificio junto con los diseños de interiores en el mismo documento. Confuso, ¿verdad? Los profesionales los separan. Y eso es exactamente lo que hacemos con un archivo CSS externo.
Esta es la forma más recomendable de trabajar. HTML en su archivo, CSS en el suyo. Orden total.
Crear un archivo CSS es tan simple como crear un archivo con extensión .css — por ejemplo, styles.css. Dentro escribes todas las reglas CSS que necesites, igual que en la etiqueta <style>, pero ahora en su propio hogar.
El siguiente paso es decirle a tu HTML que existe ese archivo. Para eso usamos la etiqueta <link> dentro del <head>:
La etiqueta <link> tiene dos atributos clave:
rel="stylesheet" — le dice al navegador que estás enlazando una hoja de estiloshref="styles.css" — la ruta al archivo CSSY en tu archivo styles.css puedes escribir cualquier regla CSS:
Ya he creado un archivo CSS por ti que puedes encontrar en las pestañas de este editor. ¡Úsalo!
Aquí viene el secreto que cambia cómo programas para siempre: cuando tus proyectos crezcan, tendrás decenas de páginas HTML que comparten los mismos estilos. Con un archivo CSS externo, todas esas páginas pueden enlazar el mismo archivo. ¿Quieres cambiar el color de todos los botones de todo tu sitio? Cambias una línea en un solo archivo. Sin el archivo externo, tendrías que editar cada página una por una.
En el archivo CSS, escribe una regla que le dé un color de fondo naranja al título principal.
El orden no es un lujo — es el fundamento de todo lo que construirás...