Historia de CSS

Orígenes

• Antes de CSS, los estilos se aplicaban con etiquetas HTML como <font>
• Esto dificultaba la organización y mantenimiento

Evolución

• 1996: CSS1 - Introducción de estilos básicos
• 1998: CSS2 - Posicionamiento y mejoras
• 2011+: CSS3 - Animaciones, flexbox, grid

Selectores

¿Qué es un selector?

Un selector en CSS se usa para elegir qué elementos HTML serán estilizados.

• Los selectores permiten aplicar estilos a múltiples elementos
• CSS ofrece varios tipos de selectores para mayor precisión

Selector de Etiqueta

Aplica estilos a todas las etiquetas de un mismo tipo.

p {
    color: red;
}

Selector de Clase

Se usa para aplicar estilos a un grupo de elementos con la misma clase.

.destacado {
    background-color: yellow;
}

Selector de ID

Se usa para aplicar estilos a un solo elemento con un ID específico.

#titulo {
    font-size: 24px;
}

Selector de Descendencia

Selecciona elementos dentro de otro elemento específico.

div p {
    color: blue;
}

Selector de Atributo

Selecciona elementos según un atributo específico.

input[type="text"] {
    border: 1px solid black;
}

Aplicación de CSS

CSS Inline

<p style="color: blue; font-size: 16px;">CSS inline</p>

CSS en el Header

<style>
p {
    color: blue;
    font-size: 16px;
}
</style>

CSS en Archivo Externo

<link rel="stylesheet" href="styles.css">

Cascada y Especificidad

Orden de Aplicación

• El último estilo declarado tiene prioridad
• Los estilos inline tienen mayor prioridad

Reglas de Especificidad

p { color: red; } /* Baja prioridad */
.destacado { color: blue; } /* Mayor prioridad */
#titulo { color: green; } /* Aún más prioridad */
!important { color: yellow; } /* Máxima prioridad */

Selectores Avanzados

Los selectores avanzados permiten seleccionar elementos HTML con mayor precisión y flexibilidad.

Selectores de Atributo

Permiten aplicar estilos a elementos en función de los atributos que tienen.

input[type="text"] {
    border: 2px solid blue;
}

Selectores de Hijos y Hermanos

Estos selectores permiten estilizar elementos basándose en su relación con otros elementos.

Pseudo-clases

Son estados especiales de los elementos que permiten aplicar estilos dinámicos.

a:hover {
    color: orange;
}

li:nth-child(odd) {
    background-color: lightgray;
}

Pseudo-elementos

Permiten agregar contenido visual antes o después de un elemento sin modificar el HTML.

p::before {
    content: "⚠ ";
    color: red;
}

p::after {
    content: " 🔹";
}

Unidades y Funciones

CSS permite usar diversas unidades de medida y funciones que facilitan cálculos dinámicos.

Unidades Relativas y Absolutas

Las unidades en CSS pueden ser **absolutas**, con un tamaño fijo, o **relativas**, que dependen del contexto:

body {
    font-size: 16px;
}

h1 {
    font-size: 2em; /* 2 veces el tamaño del texto padre */
}

.container {
    width: 50vw; /* La mitad del ancho de la pantalla */
}

Funciones Útiles

Funciones como `calc()`, `clamp()` y `var()` permiten cálculos dinámicos en CSS.

div {
    width: calc(100% - 50px);
    font-size: clamp(1rem, 2vw, 2rem);
}

Uso de Variables

Las variables CSS permiten definir valores reutilizables.

:root {
    --main-color: blue;
}

h1 {
    color: var(--main-color);
}