# 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 ``, `` * 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 `