Volver al diccionario
Desarrollo Web
CSS (Cascading Style Sheets)
CSS da estilo visual a las páginas web: colores, tipografías, layouts. Aprende qué es CSS, Flexbox, Grid, responsive design y los frameworks más usados.
Qué es CSS
CSS (Cascading Style Sheets o Hojas de Estilo en Cascada) es el lenguaje que controla la presentación visual de las páginas web. Mientras HTML define la estructura del contenido, CSS define cómo se ve: colores, tipografías, espaciado, tamaños, layouts, animaciones, efectos visuales y adaptación a distintos dispositivos.
La separación entre HTML (estructura) y CSS (presentación) es uno de los principios fundamentales del desarrollo web: permite cambiar el diseño completo de una página sin tocar el contenido, y viceversa.
El término "Cascading" (en cascada) hace referencia a cómo CSS aplica los estilos: cuando múltiples reglas afectan a un mismo elemento, se aplica un sistema de cascada y especificidad para determinar cuál prevalece.
Sintaxis básica
\\\`css
/* Selector { propiedad: valor; } */
/* Por etiqueta */
h1 {
font-size: 2rem;
color: #1a1a1a;
}
/* Por clase */
.tarjeta {
background: white;
border-radius: 8px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Por ID */
#menu-principal {
position: sticky;
top: 0;
}
\\\`
Conceptos clave de CSS
Box Model
Todo elemento HTML es una caja rectangular compuesta por cuatro capas:
- Content: El contenido (texto, imagen)
- Padding: Espacio interior entre contenido y borde
- Border: El borde del elemento
- Margin: Espacio exterior entre el elemento y otros
Flexbox
Sistema de layout unidimensional (fila o columna) para distribuir y alinear elementos de forma flexible.
\\\`css
.contenedor {
display: flex;
justify-content: space-between; /* distribución horizontal */
align-items: center; /* alineación vertical */
gap: 16px;
}
\\\`
CSS Grid
Sistema de layout bidimensional (filas Y columnas) para layouts complejos.
\\\`css
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
gap: 24px;
}
\\\`
Media Queries y Responsive Design
Permiten aplicar estilos diferentes según el tamaño de pantalla:
\\\`css
/* Móvil por defecto */
.columnas {
display: block;
}
/* Tablet y superior */
@media (min-width: 768px) {
.columnas {
display: flex;
gap: 24px;
}
}
\\\`
Custom Properties (Variables CSS)
\\\`css
:root {
--color-primario: #0066cc;
--espaciado-base: 16px;
--radio-borde: 8px;
}
.boton {
background: var(--color-primario);
padding: var(--espaciado-base);
border-radius: var(--radio-borde);
}
\\\`
Animaciones y transiciones
\\\`css
/* Transición suave en hover */
.boton {
transition: background 0.3s ease, transform 0.2s ease;
}
.boton:hover {
background: #0052a3;
transform: translateY(-2px);
}
/* Animación con keyframes */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.elemento {
animation: fadeIn 0.5s ease forwards;
}
\\\`
Frameworks y herramientas CSS
Tailwind CSS
Framework de clases utilitarias. En lugar de escribir CSS, aplicas clases predefinidas directamente en el HTML. El más popular en 2024 por su velocidad de desarrollo.
\\\`html
Nombre
Cargo
\\\`
Bootstrap
Framework de componentes predefinidos (botones, formularios, grids). Más opinionated que Tailwind, pero más rápido para prototipos.
Sass / SCSS
Preprocesador CSS que añade variables, anidamiento, mixins y funciones. Compila a CSS estándar.
CSS Modules
Sistema para encapsular estilos por componente, muy usado con React. Los nombres de clase se generan de forma única para evitar conflictos.
CSS y rendimiento web
Un CSS mal gestionado impacta negativamente en Core Web Vitals:
- CSS bloqueante: Los archivos CSS en el \
<head>\bloquean el renderizado hasta que se cargan - CSS no usado: Código CSS que el navegador descarga pero nunca aplica (eliminar con PurgeCSS o similar)
- CLS (Cumulative Layout Shift): Estilos que se cargan después del contenido causan "saltos" visuales penalizados por Google
Preguntas frecuentes
¿Qué aprendo primero, Tailwind o CSS vanilla?
Se recomienda aprender CSS estándar primero para entender los fundamentos (box model, flexbox, grid, cascada). Una vez dominados, Tailwind acelera el desarrollo enormemente. Aprender Tailwind sin conocer CSS dificulta resolver problemas cuando los estilos no funcionan como esperas.
¿Flexbox o Grid? ¿Cuándo usar cada uno?
Flexbox es ideal para layouts en una sola dirección (una fila de botones, una barra de navegación, una tarjeta con icono + texto). Grid es ideal para layouts en dos dimensiones (una cuadrícula de productos, un layout de página con sidebar). En la práctica se usan juntos: Grid para la estructura de la página, Flexbox para los componentes.
¿CSS es suficiente para crear animaciones complejas o necesito JavaScript?
CSS puede manejar la mayoría de animaciones de interfaz: transiciones, keyframes, efectos hover, spinners. Para animaciones complejas dependientes de datos, scroll-driven animations avanzadas o sincronización con lógica de aplicación, se usa JavaScript o librerías como GSAP.
Términos relacionados
Necesitas ayuda con tu ecommerce?
Somos expertos en desarrollo de tiendas online. Cuéntanos tu proyecto y te asesoramos sin compromiso.
Contactar con Ganton