Introducción al curso de CSS
Qué es CSS, un poco de historia, qué vas a aprender en este curso y cómo usar los ejemplos y los retos.
CSS (Cascading Style Sheets) define la apariencia del HTML: colores, tamaños, tipografía y disposición en pantalla.
Una regla CSS tiene selector, propiedades y valores. El selector indica a qué elementos se aplica; las propiedades describen el estilo.
Puedes enlazar CSS desde un archivo externo con <link rel="stylesheet"> o usar <style> en el head para pruebas rápidas.
La cascada y la especificidad determinan qué reglas ganan cuando varias aplican al mismo elemento.
- Qué es una regla CSS y cómo se aplica.
- El selector apunta a uno o más elementos (por etiqueta p, por clase .clase, por id #id). Entre llaves escribes propiedades y valores: color: #0f172a;, font-size: 1rem;. El navegador aplica esas declaraciones a los elementos que coincidan con el selector.
- Cuando varias reglas afectan al mismo elemento, la [cascada y la especificidad](https://developer.mozilla.org/es/docs/Web/CSS/Cascade) determinan cuál gana. Reutilizar clases (.btn, .card) ayuda a mantener el código consistente y fácil de cambiar.
- Selector + { propiedad: valor; }
- Cascada: orden, especificidad e importancia
Conceptos esenciales
Qué es una regla CSS y cómo se aplica.
El selector apunta a uno o más elementos (por etiqueta p, por clase .clase, por id #id). Entre llaves escribes propiedades y valores: color: #0f172a;, font-size: 1rem;. El navegador aplica esas declaraciones a los elementos que coincidan con el selector.
Cuando varias reglas afectan al mismo elemento, la [cascada y la especificidad](https://developer.mozilla.org/es/docs/Web/CSS/Cascade) determinan cuál gana. Reutilizar clases (.btn, .card) ayuda a mantener el código consistente y fácil de cambiar.
- Selector + { propiedad: valor; }
- Cascada: orden, especificidad e importancia
- Reutiliza clases para consistencia
Cómo enlazar CSS
Archivo externo o bloque <style>.
La forma recomendada es usar <link rel="stylesheet" href="styles.css"> en el <head> del HTML para cargar un archivo externo. Así separas estructura (HTML) y presentación (CSS) y puedes reutilizar la misma hoja en varias páginas.
Para pruebas rápidas puedes poner un bloque <style> dentro del <head> y escribir las reglas ahí. En entornos como CodePen el panel CSS equivale a ese archivo externo.
Un poco de historia
De los estilos en línea a CSS moderno.
CSS nació a mediados de los 90 para separar el contenido (HTML) de la presentación. Las primeras versiones permitían fuentes, colores y márgenes; con el tiempo se añadieron layout (float, luego flexbox y grid), animaciones, variables y mucho más.
Hoy CSS es un estándar mantenido por el W3C y los navegadores. Puedes consultar el [CSS Snapshot del W3C](https://www.w3.org/TR/css-2022/) para ver el estado actual del lenguaje.
Qué vas a aprender en este curso
Un roadmap para seguir paso a paso.
El curso está pensado para que avances en orden: primero herramientas y sintaxis, luego cascada y selectores, después modelo de caja, unidades y color, y más adelante layout, responsive y temas avanzados.
- Herramientas: editor, CodePen, generadores y DevTools para CSS.
- Sintaxis: estructura de reglas, comentarios y cómo enlazar CSS.
- Cascada y especificidad: orden de las reglas y cuándo gana cada una.
- Selectores básicos: etiqueta, clase, id y agrupación.
- Modelo de caja: contenido, padding, borde y margin.
- Unidades: px, rem, em, % y cuándo usar cada una.
Cómo usar los ejemplos y los retos
Aprovecha al máximo cada lección.
Cada lección incluye bloques de código que puedes editar y ejecutar en el navegador. Son ejemplos reales: cambia selectores, propiedades o valores y observa el resultado. Así interiorizas la sintaxis y el efecto de cada propiedad.
Los retos son ejercicios con instrucciones claras: debes completar el código para que pase las comprobaciones. Si te atascas, puedes usar las pistas y, al final, la solución recomendada. No copies y pegues sin más: intenta primero tú y compara con la solución.
- Ejemplos: edita el código, ejecuta y observa. Sirven para experimentar sin miedo.
- Retos: completa lo que se pide; las comprobaciones te dirán si está bien.
- Cada lección tiene al menos dos retos para fijar lo aprendido.
- Recursos y enlaces (MDN, web.dev, LenguajeCSS) amplían cada tema.
