CSS a mano: dale color, tipografía y caja a tu sitio
Al terminar vas a poder:Aplicar reglas CSS con hoja externa (link rel=stylesheet): selectores de etiqueta/.class/#id, color, background, font-family, unidades y modelo de caja (margin, padding, border) para dar identidad visual a un sitio HTML existente. El alumno escribe una base mínima a mano ANTES de pedir ayuda a la IA.
El día que tu sitio se ve profesional
La regla CSS y la hoja externa: conectar y probar vida
Tu paleta, tu letra y el aire alrededor: CSS base a mano
Checklist, entrega y tu base lista para la IA
Lo que entregas
Hoja style.css escrita a mano en la sesión y enlazada con <link rel="stylesheet"> en todas las páginas del sitio, con: colores propios de fondo y texto, tipografía con alternativa (fallback), al menos una regla con selector de etiqueta, una con .class y una con #id (los ganchos de las clases 5 y 6), y modelo de caja aplicado (margin/padding/border) con el contenido centrado y legible. El alumno abre su sitio en el navegador y lo ve transformado antes de terminar la clase.
Cómo se califica
- style.css externo enlazado y funcionando en todas las páginas 25%
- selectores de etiqueta, .class e #id usados con sentido 25%
- paleta y tipografía propias con fallback 20%
- modelo de caja aplicado y contenido centrado legible 20%
- escrito a mano (sin frameworks, sin pegar CSS de IA) y entrega con carpeta y nombres correctos en Drive 10%.
Antes de irte: piensa en lo que hiciste
- ¿Por qué conviene que el estilo viva en un archivo aparte (style.css) en lugar de mezclado con el contenido HTML?
- Explica con tus palabras la diferencia entre margin y padding, sin ver la lámina.
- ¿Por qué una regla
#idafecta a un solo elemento y una.classpuede afectar a muchos? - Transferencia: ¿dónde más separas "el contenido" del "cómo se ve"? Piensa en los estilos de un documento de texto o en las plantillas de una presentación: cambias el diseño y el texto sobrevive.
Resultado de aprendizaje
RAP 5.1 — Aplica reglas CSS (selectores, color, tipografía, caja) para dar identidad visual a un sitio HTML existente. (RAP 5.2 — la IA como tutor del CSS — se trabaja en la Clase B.)