Introducción a CSS
Usa CSS para aplicar estilos a elementos HTML, crear diseños, definir colores, fuentes y más. Aprende a dar estilo a páginas web con CSS.
Las Hojas de Estilo en Cascada (CSS) es el lenguaje que controla cómo se ve una página web. Mientras que HTML define el contenido y la estructura de una página (encabezados, párrafos, listas, enlaces), CSS describe su presentación: colores, fuentes, espaciado, tamaños y diseño. Los dos trabajan juntos: HTML es el esqueleto, CSS es la piel.
CSS fue creado por el Consorcio World Wide Web (W3C) y ahora es un estándar abierto compatible con todos los navegadores modernos.
Esta página explica qué es CSS, por qué existe, cómo se escribe una regla CSS y hacia dónde continuar.
Por qué existe CSS
En los primeros tiempos de la web, los estilos se mezclaban directamente en HTML mediante atributos y etiquetas de presentación. Esto hacía que las páginas fueran difíciles de mantener: cambiar un color significaba editar cada elemento en cada página. CSS resuelve esto mediante la separación del contenido y la presentación. Escribes el marcado una sola vez y controlas su apariencia desde un conjunto separado de reglas.
Esta separación ofrece tres grandes ventajas:
- Un cambio, aplicado en todas partes. Una única hoja de estilos externa puede dar estilo a cada página de un sitio. Actualiza un archivo y todo el sitio cambia.
- HTML más limpio y ligero. El marcado se centra en el significado, lo que es más fácil de leer y beneficia la accesibilidad y el SEO.
- Diseño reutilizable y coherente. Las mismas reglas se aplican automáticamente a cada elemento que coincide, de modo que los botones, encabezados y enlaces tienen el mismo aspecto en todo el sitio.
Cómo se ve una regla CSS
Una regla CSS tiene dos partes: un selector que elige qué elementos estilizar, y un bloque de declaraciones (dentro de { }) que lista qué cambiar. Cada declaración es un par propiedad: valor;.
p {
color: blue;
font-size: 16px;
}En esta regla:
pes el selector — apunta a todos los elementos<p>(párrafo).coloryfont-sizeson propiedades — las cosas que se están estilizando.bluey16pxson valores — lo que se asigna a cada propiedad.- El punto y coma
;termina cada declaración; las llaves{ }las agrupan.
A continuación se muestra una página completa que usa CSS para aplicar estilo a su encabezado y párrafo:
<!DOCTYPE html>
<html>
<head>
<title>My first CSS page</title>
<style>
h1 {
color: #1c87c9;
text-align: center;
}
p {
color: #555;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Hello, CSS!</h1>
<p>This paragraph is styled with CSS.</p>
</body>
</html>El encabezado se vuelve azul y queda centrado, y el párrafo se muestra en gris y con mayor tamaño, todo sin tocar el texto en sí.
Dónde vive CSS
Puedes aplicar CSS de tres formas, y las conocerás todas en el capítulo Cómo agregar CSS:
- Externo — reglas guardadas en un archivo
.cssseparado y vinculadas desde la página. Este es el enfoque estándar para sitios reales, ya que un solo archivo aplica estilos a muchas páginas. - Interno — reglas colocadas dentro de un elemento
<style>en el<head>de la página (como en el ejemplo anterior). - En línea — un atributo
styleen un único elemento, utilizado para ajustes puntuales rápidos.
Qué sigue
Ahora que sabes qué es CSS, continúa con los fundamentos:
- Sintaxis CSS — la anatomía de una regla en detalle.
- Cómo agregar CSS — estilos en línea, internos y externos.
- Selectores CSS — todas las formas de apuntar a elementos.
- Id y Clase en CSS — apuntar a elementos específicos por nombre.