Existen tres formas principales de aplicar estilos CSS a los elementos de una página HTML: CSS en línea, CSS interno y CSS externo.
Las tres opciones permiten cambiar la apariencia de los elementos, aunque cada una se utiliza de una manera diferente.
1. CSS en línea
El CSS en línea se aplica directamente sobre un elemento HTML mediante el atributo style.
Por ejemplo, podemos crear un elemento div y asignarle un fondo rojo:
<div style="background: red;"> <h2>CSS en línea</h2> <span>Lorem ipsum</span> </div>En este ejemplo, la propiedad background solamente afecta al elemento que contiene el atributo style.
Si inspeccionamos el elemento desde el navegador, veremos que el estilo aparece escrito directamente dentro de la etiqueta HTML.
Cuándo utilizar CSS en línea
El CSS en línea puede servir para aplicar un cambio específico sobre un único elemento.
Sin embargo, no es la opción más práctica cuando necesitamos repetir los mismos estilos en muchos elementos.
2. CSS interno
El CSS interno se escribe dentro de una etiqueta style, normalmente ubicada en la cabecera del documento HTML.
<head> <style> div { background: yellow; } </style> </head>En este caso, todos los elementos div de la página recibirán el fondo amarillo.
Por ejemplo:
<div> <h2>CSS interno</h2> <span>Primer contenido</span> </div> <hr> <div> <span>Segundo contenido</span> </div>Como el selector utilizado es div, los dos elementos recibirán el mismo estilo.
Ventajas del CSS interno
El CSS interno permite aplicar una misma regla a varios elementos sin repetir el atributo style en cada etiqueta.
Sin embargo, esas reglas solamente estarán disponibles dentro del archivo HTML donde fueron escritas.
3. CSS externo
El CSS externo consiste en guardar los estilos dentro de un archivo independiente con extensión .css.
Por ejemplo, podemos crear un archivo llamado:
estilos.cssDentro de este archivo escribimos las reglas CSS:
div { background: green; }Después debemos vincular la hoja de estilos con el documento HTML mediante la etiqueta link.
<head> <link rel="stylesheet" href="estilos.css"> </head>El atributo rel="stylesheet" indica que el archivo vinculado es una hoja de estilos.
El atributo href contiene la ubicación del archivo CSS.
Ruta del archivo CSS
Si el archivo HTML y la hoja de estilos se encuentran dentro de la misma carpeta, basta con colocar su nombre:
href="estilos.css"Si el archivo CSS está dentro de otra carpeta, debemos indicar la ruta correspondiente:
href="css/estilos.css"Diferencias entre CSS en línea, interno y externo
| Tipo de CSS | Ubicación | Alcance |
|---|---|---|
| CSS en línea | Dentro del atributo style | Un elemento específico |
| CSS interno | Dentro de la etiqueta style | Un documento HTML |
| CSS externo | En un archivo con extensión .css | Uno o varios documentos HTML |
Cuál es la forma más recomendable
Para un proyecto con varias páginas, el CSS externo suele ser la opción más organizada.
Permite guardar los estilos en un solo archivo y utilizarlo en diferentes documentos HTML.
También facilita realizar cambios generales, ya que basta con modificar la hoja de estilos para actualizar todos los documentos vinculados.
Ejemplo completo con CSS externo
Archivo HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Ejemplo de CSS externo</title> <link rel="stylesheet" href="estilos.css"> </head> <body> <div> <h2>CSS externo</h2> <span>Lorem ipsum</span> </div> </body> </html>Archivo estilos.css
div { background: green; }Conclusión
Los estilos CSS pueden aplicarse directamente sobre un elemento, dentro del documento HTML o mediante una hoja de estilos externa.
El CSS en línea es útil para cambios puntuales. El CSS interno permite controlar los elementos de una página, mientras que el CSS externo facilita mantener un diseño organizado y reutilizable en todo el proyecto.
