¿Qué es CSS?

También llamado: Cascading Style Sheets, hojas de estilo

Definición

CSS es el lenguaje con el que se define el aspecto de una web: colores, tipografías, tamaños, márgenes y la disposición de los elementos en la pantalla, adaptada a cada dispositivo.

Separar el aspecto (CSS) del contenido (HTML) permite cambiar el diseño de toda una web modificando un solo archivo.

Ejemplo

:root {
  --acento: #0b6bcb;
}

.boton {
  background: var(--acento);
  color: white;
  padding: .5rem 1rem;
  border-radius: 6px;
}

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

@media (prefers-color-scheme: dark) {
  :root { --acento: #5aa9f5; }
}

.boton es un selector; entre llaves van las propiedades.
--acento es una variable CSS, reutilizable en todo el sitio.
grid y flex son los dos sistemas modernos para maquetar.
@media aplica estilos según las condiciones del dispositivo (ancho de pantalla, modo oscuro…), la base del diseño responsive.

La cascada

«En cascada» significa que varias reglas pueden aplicarse al mismo elemento y gana la más específica; si empatan, la última. Un selector de id gana a uno de clase, y una clase a uno de etiqueta. Muchos «mi CSS no se aplica» se explican así.

Errores habituales

Recurrir a !important para forzar estilos: arregla el síntoma y complica todo lo demás.
Cargar varios frameworks CSS enteros para usar unas pocas clases; pesa y frena la carga.

¿Tienes un producto o servicio relacionado con CSS? Anúnciate en este término.

Términos relacionados

Categorías: Frontend