Cascading Style Sheets (Hojas de Estilo en Cascada)
Es el lenguaje que define la capa de presentación de un sitio web. Mientras el HTML estructura el contenido, el CSS le otorga identidad visual, jerarquía y orden.
Permite modificar el diseño de todo un sitio web cambiando un solo archivo, sin tocar el HTML.
Una Regla CSS es la unidad mínima de estilo y se compone de tres partes clave:
Indica a qué elemento HTML queremos aplicar el estilo (ej. h1, p, .clase).
La característica que queremos cambiar (ej. color, font-size, margin).
El ajuste específico que aplicamos a la propiedad (ej. blue, 20px, uppercase).
Existen diferentes formas de seleccionar elementos según la precisión que necesitemos:
* Universal: Selecciona absolutamente todo en el documento.h1, p, div Etiqueta: Afecta a todos los elementos del mismo tipo..clase Clase: El más usado. Reutilizable en múltiples elementos.#id ID: Único e irrepetible. Alta prioridad (usar con moderación).
Existen tres formas de aplicar CSS a un documento HTML, cada una con un propósito distinto:
Se usa una etiqueta <link> para conectar un archivo .css independiente.
<link rel="stylesheet" href="css/estilos.css">Los estilos se escriben dentro de etiquetas <style> en el <head>.
<style> body { background: #eee; } </style>Se aplica directamente al elemento mediante el atributo style.
<h1 style="color: red;">Hola</h1>
La herencia es el mecanismo por el cual ciertas propiedades se transmiten de un elemento padre a sus elementos hijos.
Principalmente propiedades de texto: color, font-family, font-size, line-height.
Propiedades estructurales o del Box Model: margin, padding, border, background.
body { color: blue; }, todos los párrafos y textos dentro del body serán azules automáticamente, a menos que se indique lo contrario.
| Unidad | Tipo | Uso Recomendado |
|---|---|---|
| px | Absoluta | Bordes, detalles mínimos fijos. |
| rem / em | Relativa | Accesibilidad, fuentes y espaciado escalable. |
| % / vw / vh | Relativa | Layouts fluidos y diseños adaptables a pantalla. |
color / background
Gestión de paletas y fondos cromáticos.
margin / padding
Espaciado externo e interno (Box Model).
font-size / font-weight
Control de jerarquía tipográfica.
display / flex / grid
Control de la estructura y flujo visual.
Estos son los pilares para transformar la estética de cualquier sitio:
| Categoría | Atributo | Función |
|---|---|---|
| Texto | color | Color del texto |
| Texto | font-family | Tipo de fuente o tipografía |
| Texto | font-size | Tamaño de la letra |
| Texto | font-weight | Grosor (bold, normal) |
| Texto | text-align | Alineación (center, left, right) |
| Texto | line-height | Interlineado |
| Texto | text-decoration | Subrayado o tachado |
| Fondo | background-color | Color de fondo del elemento |
| Fondo | background-image | Imagen de fondo |
| Fondo | opacity | Nivel de transparencia |
| Caja | width / height | Ancho y alto |
| Caja | margin | Espacio exterior |
| Caja | padding | Espacio interior |
| Caja | border | Estilo, grosor y color del borde |
| Caja | border-radius | Redondeo de esquinas |
| Caja | box-shadow | Sombra del elemento |
| Layout | display | Forma de mostrar (block, inline, flex, grid) |
| Layout | position | Posicionamiento (relative, absolute, fixed) |
| Layout | z-index | Orden de apilamiento (profundidad) |
| Layout | overflow | Qué hacer con el contenido que sobra |
Para ver la lista completa de propiedades técnicas:
Documentación Completa W3C (W3Schools)
Entendiendo los métodos de estilización modernos
Es el lenguaje estándar de la W3C para dar formato a documentos HTML sin librerías externas.
Basada en selectores y bloques de declaración manuales.
Es la base de todo framework; entenderlo es esencial para cualquier desarrollador.
Utility-First: Estilos aplicados directamente en el HTML mediante clases predefinidas.
Preprocesadores: Añaden superpoderes como variables y anidamiento al CSS.
UI Kits: Componentes listos para usar (botones, modales) con diseño preestablecido.
| Característica | CSS Puro | Tailwind | Sass | Bootstrap |
|---|---|---|---|---|
| Curva de aprendizaje | Media | Media/Alta | Media | Baja |
| Velocidad Desarrollo | Lenta | Muy Rápida | Media/Rápida | Muy Rápida |
| Personalización | Total | Muy Alta | Total | Limitada |
| Mantenibilidad | Difícil (Escala) | Excelente | Muy Buena | Regular |
CSS Puro: Si estás aprendiendo o el proyecto es muy pequeño.
ver más
Tailwind: Para rapidez y diseños 100% personalizados sin salir del HTML.
ver más
Sass: Para equipos que buscan modularidad y lógica separada del HTML.
ver más
Bootstrap: Para prototipos veloces o herramientas internas sin diseño único.
ver más