Ya hemos visto uno de los pilares de la web, la estructura con HTML. Ahora pasamos al segundo, aplicar reglas de estilo visual CSS.
Hasta ahora teníamos una página web aburrida, en blanco y negro, como si estuviéramos leyendo un documento científico de 1995. Para solucionar esto y darle color, forma y posicionamiento a nuestro contenido, necesitamos aplicar código CSS (Cascading Style Sheets).
El primer paso es ver cómo podemos conectar nuestro código CSS con la estructura de un documento HTML para que el navegador sepa cómo debe dibujar cada elemento en la pantalla.
Y por supuesto, hay distintos métodos, cada uno con sus ventajas y desventajas. Así que vamos a ello 👇.
Estilos en línea
La forma más básica y directa de aplicar CSS es añadir las reglas de estilo directamente sobre la etiqueta HTML que queremos modificar.
Para ello, utilizamos el atributo global style.
<h1 style="color: blue; font-size: 24px;">Mi título principal es azul</h1>
<p style="color: gray; margin-top: 10px;">Este es un párrafo de prueba.</p>
Al usar el atributo style, las reglas se aplican única y exclusivamente a ese elemento concreto. Ni siquiera afectará a otros títulos <h1> que tengáis en la misma página.
A primera vista, puede parecer la opción más fácil porque no hay que salir del archivo HTML. Sin embargo, en el mundo real, esta práctica se considera un antipatrón en la mayoría de los casos.
Desventajas del CSS en línea
- Todo arrejuntao: Mezclamos estructura (HTML) con presentación (CSS), rompiendo la separación de responsabilidades.
- Cero reutilización: Si tenéis 50 botones y queréis cambiar el color de rojo a verde, tendréis que ir modificando el atributo
style50 veces a mano.
Aún así, y a pesar de su mala fama, el CSS en línea tiene sus casos de uso específicos (pocos, eso sí).
Por ejemplo, sí está bien usado cuando Se utiliza muchísimo cuando manipulamos elementos dinámicamente con JavaScript, o aplicamos variables CSS (las veremos más adelante)..
Hoja de estilos interna
El siguiente paso lógico en la evolución del diseño web fue agrupar todas las reglas de estilo en un solo lugar dentro del mismo documento HTML.
Esto se hace dentro de la cabecera <head> de nuestra página, envolviendo el código CSS con la etiqueta <style>.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Web</title>
<style>
h1 {
color: blue;
font-size: 24px;
}
p {
color: gray;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Mi título principal es azul</h1>
<p>Este es un párrafo de prueba.</p>
</body>
</html>
Con este método, hemos conseguido separar visualmente el diseño del contenido. El <body> vuelve a estar limpio y todas las reglas se aplican a nivel de documento.
Más limpio está. Pero sigue teniendo un problema grave de escalabilidad. Si vuestra página web tiene un inicio, una página de contacto y una tienda (tres archivos .html distintos), tendréis que copiar y pegar ese mismo bloque <style> en los tres archivos.
Si el día de mañana vuestro cliente quiere cambiar el tipo de letra, os tocará abrir todos los archivos de la web uno por uno.
Hoja de estilos externa
Esta es la forma estándar y correcta de trabajar, en la mayoría de los casos. Consiste en extraer todo el código de diseño a un archivo completamente independiente con la extensión .css (por ejemplo, estilos.css o style.css).
Una vez que tenemos nuestro fichero CSS separado, debemos enlazarlo a nuestros documentos HTML. Para hacer esta conexión, utilizamos la etiqueta <link> dentro de la sección <head>.
<head>
<link rel="stylesheet" href="estilos.css">
</head>
Y en el mismo directorio, tendríamos un archivo llamado estilos.css que contiene únicamente reglas CSS puras (sin rastro de etiquetas HTML):
/* Dentro de estilos.css */
h1 {
color: blue;
font-size: 24px;
}
p {
color: gray;
}
