Prerrequisitos

• Ultimate HTML

Bienvenido al mundo del diseño web

CSS (Hojas de Estilo en Cascada) transforma HTML simple en páginas web visualmente atractivas y fáciles de usar. Controla los colores, el diseño, el espaciado y la presentación general; en esencia, da vida a tus diseños.

¿Qué es CSS?

CSS, abreviatura de Hojas de Estilo en Cascada, es un lenguaje de estilos utilizado para definir la presentación de documentos en HTML (Lenguaje de Marcado de Hipertexto). Pero, ¿qué significa esto?

Piensa en HTML como los cimientos de una casa: proporciona la estructura esencial y el diseño de tu página web. Ahora, imagina CSS como el diseñador de interiores de esa casa. Es responsable de añadir estilos, colores y estética a la estructura, haciéndola atractiva y visualmente cautivadora.

Observa la siguiente ilustración:

El lado izquierdo de la ilustración muestra HTML sin formato. El derecho muestra cómo CSS puede transformar el mismo contenido con estilo y color.

Comprensión de la sintaxis de CSS

CSS puede parecer al principio un lenguaje extranjero, pero sigue una sintaxis sencilla. Una regla CSS consta de un selector y un bloque de declaraciones. El selector indica a qué elemento(s) HTML se aplica la regla, mientras que el bloque de declaraciones contiene uno o más pares de propiedad-valor que definen el estilo.

Analicémoslo con un ejemplo:

p {
  color: purple;
  background-color: green;
}

• p es el selector, lo que indica que esta regla se aplica a todos los elementos <p>;
• color: purple; especifica que el color del texto debe ser púrpura;
• background-color: green; especifica que el color de fondo debe ser verde.

Profundizaremos en los selectores, propiedades y valores en capítulos posteriores, pero por ahora, recuerda que CSS nos permite seleccionar elementos y aplicar estilos dentro de las llaves {}.

¿Qué sigue?

Los próximos capítulos explorarán selectores, propiedades, valores y técnicas prácticas de estilizado. Al finalizar, podrás transformar HTML básico en diseños limpios y atractivos.