Contenido del curso
Tres formas de agregar CSS a HTML
CSS es el lenguaje que da estilo visual a tus documentos HTML y existen tres formas de aplicarlo: como atributo en la etiqueta, dentro del head con una etiqueta style o enlazando un archivo externo. Si estás empezando en desarrollo web, entender estas tres formas y cuándo usar cada una te evita problemas de mantenimiento desde el primer proyecto.
Qué significa CSS y por qué se llama hoja de estilos en cascada
La sigla CSS viene de Cascade Style Sheets, hojas de estilo en cascada. El nombre no es decorativo: describe exactamente cómo se aplican los estilos en tu código [0:13].
Los estilos se leen de arriba hacia abajo, y los últimos que escribes son los que terminan ganando. Si declaras un color para un elemento al inicio del archivo y más abajo le asignas otro color al mismo elemento, el navegador va a respetar el último. Esto puede ser una fuente común de confusión cuando esperas ver un estilo y aparece otro.
¿Qué es CSS? Es el lenguaje de hojas de estilo en cascada que define la apariencia visual de los elementos HTML, como colores, tamaños y posiciones. Su nombre viene de que las reglas se aplican en cascada, donde las últimas declaraciones sobrescriben a las anteriores.
Cómo agregar estilos directamente en la etiqueta HTML
La primera forma, y la más antigua, consiste en colocar los estilos como un atributo dentro de la propia etiqueta HTML [2:11]. Esta era la práctica original cuando se definieron los primeros estándares.
El atributo se llama style y dentro escribes la propiedad y el valor que quieres modificar. Por ejemplo, para cambiar el color de un párrafo:
html
<p style="color: red;">Texto del párrafo</p>El problema aparece cuando tu proyecto crece. Si necesitas replicar colores o ajustar la paleta, terminas modificando decenas de etiquetas una por una. Poco mantenible y muy molesto al momento de hacer cambios globales.
Cómo usar la etiqueta style dentro del head
La segunda forma traslada los estilos al head del documento mediante la etiqueta <style> [3:39]. Dentro de esa etiqueta llamas al elemento HTML que quieres modificar, abres llaves y declaras las propiedades.
html
<head> <style> h1 { color: blue; } h2 { color: green; } </style> </head>Esta opción es más ordenada que la anterior porque centraliza los estilos en un solo lugar y aplica las reglas a todas las etiquetas del mismo tipo. Sin embargo, en proyectos grandes el head se llena de código y vuelve a complicarse el mantenimiento.
Cómo enlazar un archivo CSS externo como buena práctica
La tercera forma, y la recomendada, consiste en crear un archivo independiente con extensión .css y enlazarlo al HTML [5:34]. Lo común es nombrarlo styles.css, aunque el nombre puede variar; lo importante es la extensión, porque le indica al navegador que se trata de una hoja de estilos.
El enlace se hace en el head con la etiqueta link, que necesita dos atributos clave:
rel="stylesheet", que define la relación del archivo como hoja de estilos.href="styles.css", que apunta a la ruta y nombre del archivo.html
<link rel="stylesheet" href="styles.css">Una vez enlazado, todo lo que escribas dentro de styles.css se refleja automáticamente en el documento HTML. Esta separación entre estructura y estilo es la base de un código limpio y escalable.
¿Cuál es la mejor forma de aplicar CSS? Enlazar un archivo
.cssexterno desde elheadcon la etiquetalink. Mantiene el HTML limpio, centraliza los estilos y facilita reutilizarlos en múltiples páginas.
Cómo se comporta CSS cuando hay varias etiquetas iguales
Cuando aplicas un estilo a una etiqueta como p, ese estilo afecta a todas las etiquetas de párrafo del documento, salvo aquellas que tengan un style como atributo directo en la etiqueta [7:51]. Ese atributo inline tiene prioridad sobre el archivo externo.
Ejemplo práctico: si pintas todos los párrafos de azul desde tu styles.css con el código #5795D3, pero hay un <p> con style="color: red;" en el HTML, ese párrafo seguirá siendo rojo. Aquí entra un concepto fundamental llamado especificidad, que define qué regla gana cuando hay reglas en conflicto sobre el mismo elemento.
Resumen de las tres formas de aplicar CSS
style directamente en la etiqueta HTML.<style> dentro del head del documento..css enlazado con la etiqueta link.La tercera es la que vas a usar como buena práctica profesional. Las otras dos existen y funcionan, pero pierden sentido en cuanto el proyecto crece más allá de una página simple.
¿Ya identificaste cuál de las tres formas estás usando en tu proyecto actual? Cuéntame en los comentarios cómo organizas tus estilos y qué dudas te quedan sobre la cascada en CSS.