CSS: Estilo y Diseño Visual

Si HTML es el esqueleto, CSS es la piel y el vestuario de la web. Se trata de un lenguaje de hojas de estilo encargado de la presentación visual de los documentos mediante un sistema de reglas.

Conceptos Fundamentales

Para dominar el diseño web, debemos internalizar estos 5 términos clave:

1. Selector (Selector): El patrón que indica a qué elementos HTML se les aplicarán los estilos.
2. Property (Propiedad): El aspecto específico que deseamos modificar (como el color o el tamaño).
3. Value (Valor): El ajuste preciso que asignamos a una propiedad determinada.
4. Box Model (Modelo de Caja): La estructura rectangular que rodea a cada elemento, compuesta por contenido, relleno, borde y margen.
5. Specificity (Especificidad): El conjunto de reglas que determina qué estilo tiene prioridad cuando hay conflictos entre selectores.

Ejemplo de Manipulación en JavaScript

Aunque definimos estilos en archivos .css, a menudo usamos JavaScript para cambiar una Property (Propiedad) de forma dinámica basándonos en la interacción del usuario:

// Seleccionando un elemento mediante un Selector
const cardElement = document.querySelector('.card');

// Modificando una Property y su Value directamente
cardElement.style.backgroundColor = '#f0f0f0';
cardElement.style.padding = '20px'; // Afectando el Box Model

// Verificando la jerarquía por Specificity
console.log(`Estilo aplicado a: ${cardElement.className}`);

Comprender el Box Model (Modelo de Caja) es vital para el diseño responsivo, mientras que dominar la Specificity (Especificidad) evita que perdamos el control sobre el diseño a medida que el proyecto crece.