Fundamentos de CSS3

Este curso está dirigido a personas que se inician en el desarrollo web y necesitan controlar el aspecto de una página con criterio, en lugar de copiar estilos de tutoriales sin entender por qué funcionan. A lo largo de seis horas el participante parte de la anatomía de una regla CSS y de las tres formas de enlazar una hoja de estilos a un documento HTML, y avanza hacia el uso deliberado de selectores, el control del espaciado mediante el modelo de caja y la aplicación de tipografía y color para reproducir un diseño de referencia. El tramo final se dedica al mecanismo que explica la mayoría de las sorpresas de CSS —la cascada y la especificidad— y a la depuración de hojas de estilo con el inspector del navegador. Al finalizar, el participante será capaz de dar estilo a una página HTML completa a partir de una especificación visual y de localizar por sí mismo el origen de un estilo que no se está aplicando como esperaba.

Al finalizar el curso, el participante será capaz de:

• Describir la sintaxis de una regla CSS identificando selector, propiedad y valor en ejemplos de código dados
• Identificar las tres formas de enlazar CSS a un documento HTML y señalar las ventajas e inconvenientes de cada una
• Aplicar selectores de etiqueta, clase e ID para asignar estilos a elementos concretos de una página HTML de estructura provista
• Ajustar el espaciado y las dimensiones de los elementos manipulando las propiedades del modelo de caja —margin, padding, border, width y height— para reproducir una especificación visual dada
• Aplicar propiedades de tipografía y color —font-family, font-size, font-weight, color y text-align— para reproducir un diseño de texto de referencia
• Explicar el orden de la cascada y la especificidad básica (etiqueta < clase < ID) razonando por qué prevalece un estilo sobre otro ante un conflicto deliberado
• Aplicar la pseudoclase :hover para modificar el estilo de un elemento interactivo como un botón o un enlace
• Identificar y corregir errores sintácticos comunes en una hoja de estilos —punto y coma omitido, selector incorrecto, propiedad mal escrita— apoyándose en las herramientas de desarrollo del navegador

1. Qué es CSS y cómo se conecta con HTML Anatomía de una regla: selector, bloque de declaraciones y pares propiedad-valor terminados en punto y coma; identificación de cada parte sobre ejemplos reales; las tres vías de enlace —hoja externa con <link>, bloque <style> dentro del documento y atributo style en línea—, en qué orden las tiene en cuenta el navegador y por qué la hoja externa es la opción por defecto en cualquier proyecto que vaya a mantenerse
2. Selectores y modelo de caja Selectores de etiqueta, clase e ID: sintaxis de cada uno, cuándo emplearlos y por qué la clase es la unidad de trabajo habitual; aplicación de estilos sobre una página HTML ya construida. El modelo de caja como base de todo el espaciado: contenido, padding, border y margin; control de dimensiones con width y height; efecto de box-sizing al reproducir una especificación visual concreta
3. Tipografía, color y estados Propiedades tipográficas fundamentales —font-family y las pilas de fuentes con alternativa, font-size, font-weight y text-align— y notaciones habituales del color; reproducción de un diseño de texto de referencia entregado como imagen. Primer contacto con los estados mediante la pseudoclase :hover: cómo un botón o un enlace cambia de aspecto al paso del cursor y qué propiedades conviene modificar para que el cambio resulte perceptible
4. Cascada, especificidad y depuración El mecanismo que decide qué regla gana cuando dos compiten: orden de aparición, herencia y especificidad básica en la escala etiqueta < clase < ID, trabajado sobre fragmentos con conflictos deliberados. Cierre con la detección de errores propios —punto y coma omitido, selector mal escrito, propiedad inexistente— y su localización con el inspector de estilos del navegador, que permite ver qué reglas se están aplicando, cuáles aparecen tachadas y de dónde procede cada valor

• Navegador moderno con herramientas de desarrollo (Chrome o Firefox en versión actualizada); el inspector de estilos es imprescindible en el último bloque
• Editor de código, preferiblemente Visual Studio Code con la extensión Live Server o Live Preview para recargar los cambios en el navegador al guardar
• Los documentos HTML de partida y los diseños de referencia se entregan al inicio del curso; el alumno no tiene que crearlos
• No se requiere backend, build tools, preprocesadores ni frameworks CSS: todo el trabajo se realiza en CSS nativo sobre archivos locales

No se requiere experiencia previa con CSS ni con ningún lenguaje de programación: el curso arranca desde la sintaxis de una regla. Sí conviene haber escrito HTML sencillo —una página con encabezados, párrafos, listas, enlaces e imágenes— para reconocer los elementos sobre los que se aplican los estilos; quien no lo tenga puede cubrirlo previamente con HTML01 — HTML semántico y accesibilidad. En cualquier caso, todos los ejercicios parten de documentos HTML ya construidos que se entregan al alumno, de modo que el trabajo se centra íntegramente en la hoja de estilos. No hace falta saber JavaScript ni haber usado ningún framework CSS.