CSS básico para creativos

Qué es CSS

CSS es el lenguaje que da estilo visual a la web: colores, tamaños, tipografías, fondos, bordes, sombras, espacios y comportamiento responsive.

Selectores y clases

Una clase CSS permite aplicar estilo a un elemento concreto. En HTML escribes class="tarjeta-servicio" y en CSS defines cómo se ve esa tarjeta.

.tarjeta-servicio {
  background: #111827;
  color: white;
  padding: 32px;
  border-radius: 24px;
}

Colores y tipografía

Los colores suelen escribirse en hexadecimal, por ejemplo #ffffff para blanco o #0b1020 para un azul oscuro. También puedes usar degradados.

background: linear-gradient(135deg, #8b5cf6, #22d3ee);
font-size: 18px;
font-weight: 700;
line-height: 1.6;

Margin y padding

Padding es el espacio interior de un bloque. Margin es el espacio exterior. Si una tarjeta se ve apretada, suele necesitar más padding. Si dos secciones están demasiado juntas, suele faltar margin.

Responsive

CSS también permite adaptar el diseño a móvil. Por ejemplo, puedes reducir tamaños de texto o cambiar columnas por una sola columna.

@media (max-width: 768px) {
  .hero h1 { font-size: 38px; }
  .grid { grid-template-columns: 1fr; }
}

CSS en Elementor

Elementor resuelve mucho visualmente, pero el CSS personalizado ayuda cuando necesitas precisión: igualar tarjetas, corregir responsive, crear efectos, controlar fondos o evitar que un diseño se rompa.

Genera CSS limpio para una sección con clase [clase]. Necesito que sea responsive, con tarjetas modernas, fondo [estilo], botones [estilo] y buena lectura en móvil. No debe afectar al resto de la web.