Introducción
CSS (Cascading Style Sheets) es el lenguaje que usamos para dar estilo y diseño a las páginas web. Si HTML es la estructura de una casa, CSS es la pintura, los muebles y la decoración que la hacen única. CSS controla cómo se ve un sitio web: colores, tamaños, márgenes, fuentes y más. Permite separar el contenido (HTML) de la presentación (CSS), lo que facilita el mantenimiento y mejora la accesibilidad.
Tipos de selectores
Los selectores nos permiten decirle al navegador qué elementos queremos modificar.
- Por etiqueta: p { color: red; }
- Por clase: .boton { background: blue; }
- Por id: #menu { font-size: 18px; }
- Combinadores y avanzados: article p, div > span, :hover, etc.
El modelo de cajas (Box Model)
En CSS, todo elemento es una caja. Cada caja tiene:
- Content → El contenido del elemento.
- Padding → Espacio entre contenido y borde.
- Border → El borde del elemento.
- Margin → Espacio entre cajas.
Entender este modelo es clave para diseñar correctamente.
Unidades en CSS
Existen distintas formas de medir tamaños en CSS:
- Absolutas: px, cm, in.
- Relativas: %, em, rem, vh, vw.
Las relativas permiten un diseño más flexible y adaptable.
Colores en CSS
Puedes definir colores de distintas formas:
- Palabras clave: red, blue.
- Hexadecimal: #ff0000.
- RGB / RGBA: rgb(255,0,0) / rgba(255,0,0,0.5)
- HSL: hsl(0, 100%, 50%).
Custom Properties (Variables en CSS)
Las variables CSS facilitan la reutilización de valores:
:root {
--color-principal: #3498db;
}
h1 {
color: var(--color-principal);
}
Diseño adaptable (Responsive Design)
El responsive design hace que un sitio se vea bien en todos los dispositivos. Se logra con media queries, unidades relativas y técnicas como flexbox y grid.
Flexbox vs Grid en CSS
- Flexbox: Ideal para alinear elementos en fila o columna.
- Grid: Perfecto para diseños de dos dimensiones (filas y columnas).
Ambos son complementarios y muy poderosos.
@container en CSS (Container Queries)
Las container queries permiten que los elementos se adapten no solo al tamaño de la pantalla, sino al de su contenedor padre. Ejemplo: cambiar el diseño de una tarjeta dependiendo de si aparece en un espacio grande o pequeño.
Conclusión
CSS es la herramienta que transforma simples páginas HTML en experiencias visuales atractivas. Dominar sus fundamentos —selectores, modelo de cajas, unidades, colores, responsive, flexbox, grid y container queries— te dará una base sólida para crear diseños modernos y profesionales.