Con HTML escribiste el contenido. CSS le da el aspecto: colores, tipografía, espacios y la posición de cada cosa en la pantalla.
CSS aquí es la base conceptual, no la herramienta del trabajo
Este tópico existe para que entiendas cómo funciona el estilo: qué es una regla, cómo se apunta a un elemento y cómo se reparte el espacio.
La maquetación del Trabajo 1 la harás con Tailwind, el tópico siguiente, que es mucho más rápido. Pero Tailwind no es otra cosa: por debajo escribe exactamente estas mismas propiedades. Sin entenderlas, Tailwind es copiar y pegar a ciegas.
Tópicos
| Página | Contenido |
|---|---|
| 1. Qué es CSS | Qué hace, las tres formas de enlazarlo y la anatomía de una regla |
| 2. Selectores y propiedades | Apuntar a los elementos, los estados, la cascada, el inspector (F12), y las propiedades de texto, fondo y tamaño |
| 3. Modelo de caja y Flexbox | El espacio que ocupa cada elemento, box-sizing y cómo alinear cosas en fila o columna |
| 4. Grid, position y el menú | Cuadrículas, position para reconocerlo y convertir una lista de enlaces en una barra |
| 5. Práctica | Darle estilo al mini sitio de HTML: texto, estados, tarjetas, navbar y grilla |
Objetivos
- Enlazar una hoja de estilos externa y explicar por qué es la forma recomendada.
- Apuntar a cualquier elemento con un selector de etiqueta, clase o id.
- Dar respuesta visual con
:hover,:focusy:active, sin dejar fuera al teclado. - Predecir qué regla gana cuando dos chocan y comprobarlo en el inspector (
F12). - Distinguir
paddingdemargin, usarlos a propósito y explicarbox-sizing. - Alinear y distribuir elementos con Flexbox, y armar una grilla con Grid básico.
- Reconocer
positional leer código ajeno.
Antes de empezar
- Tener listo el mini sitio de tres vistas de HTML
- Saber qué son
classeid(Semántica y atributos) - VSCode con Live Server, para ver cada cambio al guardar