# CSS Semestre 01, 2026 ## Contexto * HTML define estructura * Sin estilos, todo se ve igual * Difícil jerarquizar contenido ### La necesidad * Separar contenido y presentación * Control visual * Consistencia ## Definición * Cascading Style Sheets * Lenguaje de estilos * Define apariencia visual ### Qué hace CSS * Colores * Tipografías * Espacios * Layout ## HTML vs CSS ### Roles claros * HTML = estructura * CSS = diseño * JavaScript = comportamiento No mezclar responsabilidades ## Historia ### Antes de CSS * Uso de `<font>`, `<center>` * Estilos incrustados * Código difícil de mantener ### Evolución * CSS1 – estilos básicos * CSS2 – posicionamiento * CSS3 – módulos modernos ## Regla CSS * Selector * Propiedad * Valor ### Ejemplo ```css p { color: red; } ``` ## Selectores ### Definición * Indica a qué elemento aplicar estilos * Puede seleccionar uno o muchos ### Importancia * Precisión * Mantenibilidad ## Selectores básicos ### Selector de etiqueta ```css p { color: blue; } ``` ### Selector de clase ```css .card { padding: 1rem; } ``` ### Selector de id ```css #main { width: 100%; } ``` ## Buenas prácticas ### Regla general * Clases: reutilizables * ID: único ### Error común * Usar id para todo ## Formas de aplicar CSS * CSS puede aplicarse de distintas maneras * Cada forma tiene un propósito distinto * No todas son igual de recomendables ### Inline * Se escribe directamente en la etiqueta HTML * Tiene prioridad alta **Ventajas** * Rápido * Útil para pruebas puntuales **Desventajas** * Mala práctica * Difícil de mantener * Mezcla contenido y estilo ### Interno * Se escribe dentro de la etiqueta `<style>` * Vive en el mismo archivo HTML **Ventajas** * Útil para prototipos * Fácil de probar estilos **Desventajas** * No reutilizable * No escala bien ### Externo * Se escribe en un archivo `.css` * Se enlaza con `<link>` **Ventajas** * Recomendado * Escalable * Reutilizable * Código más limpio **Idea clave** * Inline: excepción * Interno: pruebas * Externo: producción ## Cascada * El orden importa * El último gana ### Jerarquía * Etiqueta * Clase * ID * Inline ## Unidades de medida * Definen tamaños en CSS * Afectan accesibilidad y responsive * No todas se comportan igual ### Absolutas * Tienen un tamaño fijo * No dependen del contexto Ejemplo: px * Predecibles * No se adaptan al tamaño de pantalla * No escalan bien ### Relativas * Dependen del contexto * Se adaptan mejor **Principales** * `em` → relativo al tamaño del elemento padre * `rem` → relativo al tamaño del `html` * `vw` → porcentaje del ancho de la ventana * `vh` → porcentaje de la altura de la ventana ### Comparativa | Unidad | Relación | | ------ | ----------------- | | px | Tamaño fijo | | em | Elemento padre | | rem | Documento | | vw | Ancho de pantalla | | vh | Alto de pantalla |