Como se utiliza CSS
Una vez entendido que los documentos web se componen de código HTML y CSS, es fundamental conocer cómo se conectan y de qué manera se pueden aplicar los estilos CSS dentro de un archivo HTML. Antes de comenzar a escribir estilos, debemos explorar las distintas formas de integrar CSS en nuestras páginas.
Métodos para incorporar CSS en HTML
Existen tres maneras principales de aplicar estilos CSS en un documento HTML. Algunas son más recomendadas que otras según el contexto y el tamaño del proyecto:
| Método | Descripción |
|---|---|
| Archivo CSS externo | El CSS se guarda en un archivo independiente con extensión .css. |
| Bloque de estilos internos | Los estilos se escriben dentro de una etiqueta <style> en el HTML. |
| Estilo en línea | Los estilos se definen directamente en un elemento HTML con el atributo style. |
1. CSS Externo
Este es el método más común y recomendado para proyectos organizados o de mayor escala. Se utiliza la etiqueta <link> en la sección <head> del documento HTML para enlazar un archivo CSS separado. Por ejemplo:
htmlCopiarEditar<link rel="stylesheet" href="estilos.css">
Esto le indica al navegador que debe cargar y aplicar las reglas de estilo desde el archivo estilos.css. Es recomendable colocar esta línea lo más arriba posible en el <head>, idealmente antes de cualquier script, para que los estilos se carguen rápidamente y se eviten demoras visuales que puedan hacer parecer que la página está incompleta.
Cabe mencionar que en versiones anteriores de HTML se usaba también el atributo type="text/css", el cual es opcional en HTML5, ya que los navegadores modernos lo asumen por defecto.
2. CSS Interno
En este enfoque, las reglas CSS se colocan directamente dentro del documento HTML, en un bloque <style> que también va dentro del <head>. Este método puede ser útil para prototipos o documentos simples:
htmlCopiarEditar<style>
body {
background-color: #f0f0f0;
}
</style>
Sin embargo, si se utiliza en exceso puede dificultar la organización y mantenimiento del código.
3. Estilos en línea
La tercera opción consiste en aplicar estilos directamente dentro de los elementos HTML, utilizando el atributo style. Por ejemplo:
htmlCopiarEditar<p style="color: blue; font-size: 16px;">Texto con estilo en línea</p>
Aunque puede ser útil para ajustes rápidos o pruebas, se desaconseja su uso en proyectos grandes, ya que complica la reutilización y dificulta la limpieza del código.
Para quienes están empezando y desean experimentar rápidamente con HTML, CSS y JavaScript sin necesidad de crear archivos en su ordenador, existen plataformas como CodePen, que permiten escribir y visualizar el resultado del código en tiempo real desde el navegador.
¿Te gustaría que convierta esta explicación en una infografía o esquema visual?