100 Días de Código en Python — Día 43: Fundamentos web — Introducción a CSS

🎯 Objetivo de aprendizaje#

Explicar qué significa Cascading Style Sheets y por qué es mejor separar el estilo del contenido.

📖 Explicación conceptual#

CSS = Cascading Style Sheets, hojas de estilo en cascada.

• Hoja de estilo: un lenguaje para decir cómo deben verse las cosas (igual que HTML es un lenguaje de marcado: la parte "ML").
• En cascada: como el agua de una cascada que cae de un nivel a otro, los estilos se aplican desde lo más general hasta lo más específico. Lo veremos en acción con los selectores.

Un poco de historia (según el curso):

1. Al principio solo existía HTML, y los desarrolladores no podían controlar la apariencia de sus páginas. Marc Andreessen, creador del navegador Mosaic (y luego de Netscape), respondió en un correo famoso a quienes pedían más control, en resumen, que "lo sentía, pero no había forma de hacerlo". Por eso todas las páginas se veían parecidas.
2. HTML 3.2 (1997) agregó etiquetas y atributos de estilo, como <font> (con color, face y size) y <center>. Hoy están obsoletos (deprecated): no se deben usar.
3. ¿Por qué fracasó esa idea? Mezclar estilo con contenido llenaba el HTML de "basura": en un sitio grande, miles de líneas donde era imposible distinguir la estructura del diseño.
4. El W3C publicó la recomendación de CSS, impulsada por Håkon Wium Lie, considerado el padre de CSS. Por fin se pudo separar el estilo del contenido.

La analogía de la fábrica (del curso): en una fábrica de carros, una persona se encarga de los faros y otra de las ruedas. Esa modularidad es clave en la fabricación y en la programación.

Otros lenguajes de estilos: el curso menciona Sass (Syntactically Awesome Style Sheets) y Less (Leaner CSS). El que todo desarrollador web debe conocer es CSS.

🛠️ Nota técnica: la narración presenta primero HTML 3.2 (1997) y "después" la recomendación de CSS (1996), lo que invierte la cronología. En realidad fueron casi simultáneas: Håkon Wium Lie propuso CSS en 1994, CSS1 se convirtió en recomendación del W3C en diciembre de 1996 y HTML 3.2 salió en enero de 1997. Además, Sass y Less no reemplazan a CSS: son preprocesadores que se escriben con una sintaxis ampliada y se traducen a CSS, porque el navegador solo entiende CSS.

🔎 Ejemplo explicado: el mismo HTML, dos apariencias#

La profesora creó appbrewery.github.io/just-add-css: una página con un botón que activa y desactiva el CSS.

• Sin CSS: simple y aburrida.
• Con CSS: otras fuentes, colores y distribución.
• Si abres Ver código fuente en las dos versiones, el HTML es idéntico. Solo cambia el CSS aplicado.

Otro ejemplo famoso de esta idea (adaptación): el proyecto CSS Zen Garden (csszengarden.com) muestra decenas de diseños diferentes para el mismo archivo HTML.

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: en just-add-css, anota tres cambios visuales que produce el CSS.
• 🟡 Reto 2: en MDN, busca las páginas de <font> y <center>. ¿Qué advertencia aparece? ¿Qué recomienda usar en su lugar?
• 🟠 Reto 3: escribe una página con <center> y <font color="red">, y comprueba si todavía funciona en Chrome. Explica por qué "funciona" no es lo mismo que "es correcto".
• 🔴 Reto 4: busca en tu vida escolar un ejemplo de separación de responsabilidades (por ejemplo, en la organización de una izada de bandera o de un evento deportivo). ¿Qué problemas aparecerían si una sola persona hiciera todo?

🎯 Objetivo de aprendizaje#

Aplicar CSS de las tres formas y elegir la adecuada para cada situación.

🧠 ¿Qué aprenderemos?#

Atributo style, elemento <style>, elemento <link>, propiedad, valor, selector y rutas relativas (./).

📖 Explicación conceptual#

Anatomía de una regla CSS:

h1 {
  color: blue;
}
/* selector { propiedad: valor; } */

• Selector (h1): a qué elementos se aplica.
• Propiedad (color): qué característica se cambia.
• Valor (blue): el nuevo valor.
• La propiedad y el valor se separan con dos puntos : y la declaración termina en punto y coma ;. Las llaves { } agrupan las declaraciones de un selector.

CSS en línea (no lleva selector ni llaves, porque ya está dentro del elemento):

<html style="background: blue;">

CSS interno:

<head>
  <style>
    html {
      background: red;
    }
  </style>
</head>

CSS externo:

<head>
  <link rel="stylesheet" href="./styles.css" />
</head>

• link es un elemento vacío.
• rel (relationship): qué papel tiene el archivo enlazado; aquí, una hoja de estilos.
• href: dónde está el archivo. ./ significa "en esta misma carpeta".

Rutas relativas (repaso del ejercicio):

⚠️ Errores frecuentes#

📝 Ejercicio original del curso: las tres formas de agregar CSS#

• Archivos de inicio: index.html, inline.html, internal.html, external.html y style.css (más una carpeta solution que conviene colapsar en VS Code para no confundirse).
• Enunciado:
  1. En index.html, crea tres enlaces a las otras tres páginas (./inline.html, etc.).
  2. En inline.html, pon el h1 en azul con CSS en línea.
  3. En internal.html, pon el h1 en rojo con CSS interno.
  4. En external.html, pon el h1 en verde con CSS externo usando style.css.
• Resultado esperado: una página de inicio con un h1 y tres enlaces; cada enlace lleva a una página cuyo título tiene el color indicado.
• Convención del curso: el <style> interno va dentro del <head>. Funcionaría en otro lugar, pero la mayoría de desarrolladores lo pone ahí.

🔍 Antes de programar#

• ¿Cuál de las tres formas necesita un selector? ¿Cuál no, y por qué?
• ¿Qué dos atributos necesita el <link>?
• ¿Dónde está style.css respecto a external.html? ¿Qué ruta escribirás?

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: agrega en external.html un segundo h1. ¿También se pone verde? ¿Por qué? Haz lo mismo en inline.html y compara.
• 🟡 Reto 2: enlaza el mismo style.css desde inline.html. ¿Qué color gana en el h1: el azul en línea o el verde externo? Anota tu predicción antes de probar.
• 🟠 Reto 3: mueve style.css a una carpeta css/ y corrige las rutas de todas las páginas que lo usan. ¿Cuántos archivos tuviste que modificar? ¿Qué pasaría en un sitio con 50 páginas si el CSS fuera interno?
• 🔴 Reto 4 — Pensamiento computacional: un colegio tiene 30 páginas con el mismo encabezado azul, pero la página de "Emergencias" debe tener el encabezado rojo. Diseña una estrategia que combine CSS externo con otra forma, y justifícala pensando en mantenimiento: ¿qué pasa cuando el colegio cambie su color institucional?

🎯 Objetivo de aprendizaje#

Usar selectores de elemento, clase, id, atributo y universal para aplicar estilos solo donde se necesitan.

📖 Explicación conceptual#

El selector es la parte de la regla que elige a qué HTML aplicar las declaraciones que van entre llaves.

Clase contra id:

• class sirve para agrupar: muchos elementos, aunque sean de tipos distintos (un h2 y un p), pueden tener la misma clase.
• id debe ser único: un solo elemento con ese id en cada archivo HTML.
• Entre el . o el # y el nombre no hay espacios, y el nombre debe coincidir exactamente (mayúsculas incluidas). Consejo del curso: copia y pega los nombres para evitar errores de escritura.

Selector de atributo: también puede escribirse sin el elemento: [draggable] selecciona cualquier elemento con ese atributo.

🔎 Ejemplo explicado#

<h2>Rojo</h2>
<h2 class="red-text">Verde</h2>
<p class="red-text">Párrafo</p>
<h2 id="main">Azul</h2>
<p draggable="true">Uno</p>
<p draggable="false">Dos</p>

📖 Un adelanto: ¿qué pasa cuando dos reglas chocan? (adaptación)#

En el ejercicio original, la profesora nota que un elemento con id sigue verde aunque otra regla de atributo lo pinte de azul. Explica que se debe a la especificidad y que el tema se estudia más adelante. Para entender el ejercicio basta con esta regla simplificada:

en línea > id > clase o atributo > elemento > universal

Si dos reglas tienen la misma especificidad, gana la que aparece después en el código (la "cascada"). (Verificado en Chrome 153: un li con id pintado de verde por #id sigue verde aunque li[value] lo pinte de azul.)

⚠️ Errores frecuentes#

📝 Ejercicio original del curso: los cinco TODO de selectores#

• Contexto: el index.html ya tiene enlazado un style.css externo. Ese CSS trae algunas reglas de inicio que no se deben tocar.
• Restricción importante: no modificar nada del index.html (ni clases, ni ids, ni valores). Todo el trabajo va en style.css.
• Las reglas CSS se entregan escritas en cada TODO; el reto es escribir el selector correcto:
  1. Todos los párrafos → texto rojo (selector de elemento).
  2. Todos los elementos con cierta clase (varios elementos de distinto tipo) → tamaño de fuente mayor (selector de clase). Resultado: se agrandan las viñetas, pero no el h1 ni el h2.
  3. El elemento con cierto id (un elemento de lista) → texto verde (selector de id).
  4. Los li cuyo atributo value vale 4 → texto azul (selector de atributo con valor). Los li de la lista ordenada tienen value para que la numeración empiece en 2. Si seleccionas solo li[value], se ponen azules los cuatro… excepto el del id, por especificidad.
  5. Todos los elementos → text-align: center (selector universal).
• Resultado esperado: que la vista previa coincida con goal.png. La página sirve además como resumen: cada viñeta describe el selector que la estiliza.

🔍 Antes de programar#

• Para cada TODO, ¿en qué parte del index.html está la información que necesitas (el nombre de la clase, el id, el atributo)?
• ¿Qué símbolo necesita cada tipo de selector?
• En el TODO 4, ¿qué diferencia hay entre li[value] y li[value="4"]? ¿Cuál pide el enunciado?

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1 — Predicción: antes de hacer el TODO 5, escribe qué elementos se centrarán. Luego compruébalo.
• 🟡 Reto 2: un elemento puede tener varias clases separadas por espacio: class="aviso importante". Crea dos reglas, .aviso y .importante, y comprueba que el elemento recibe las dos.
• 🟠 Reto 3 — Depuración: este CSS no funciona como se espera. Encuentra los cuatro errores:

  .titulo-principal
    color: navy;
  }
  # menu { color: green; }
  p[lang=en" { color: gray; }
  h2 { color red; }

• 🔴 Reto 4 — Pensamiento computacional: tienes una lista de 30 estudiantes. Algunos son monitores de área, uno es el representante del curso y algunos tienen una nota pendiente. Diseña los atributos class e id que pondrías en el HTML y las reglas CSS para: resaltar a los monitores, destacar al representante y marcar las notas pendientes. Justifica cuándo usaste class y cuándo id.

Problema#

La profesora está aprendiendo español y quiere una página de "fichas de vocabulario": cada palabra de un color, escrita en ese color, al lado de una imagen de ese color.

Contexto (adaptación)#

Para ustedes, el español es la lengua materna: den la vuelta al proyecto y háganlo para aprender los colores en inglés u otro idioma que estudien (el curso lo permite: "puede ser cualquier otra lengua").

Objetivo#

Dar estilo a una página ya escrita usando solo CSS externo.

Requisitos funcionales (originales del curso)#

• El index.html ya enlaza un style.css que no existe: debes crearlo en la ubicación exacta que indica el <link> (así practicas las rutas).
• No cambies nada del index.html.
• Cada h2 de color debe tener un color de texto que coincida con su significado (cada uno tiene un id con el nombre del color en inglés, por ejemplo id="red").
• Los h2 de los colores deben tener font-weight: normal (más delgados que el h2 por defecto, que es negrita). Pero hay otro h2 en la página que debe seguir en negrita. Pista del curso: los de los colores comparten la clase color-title.
• Todas las imágenes: 200 px de alto y 200 px de ancho.
• La solución puede verse abriendo solution.html en la vista previa.

Restricciones técnicas#

Solo CSS externo. Usa selectores de id, clase y elemento según convenga.

Planificación#

1. Comprender: ¿qué debe cambiar visualmente?
2. Entradas: el HTML dado (ids, clases, elementos).
3. Proceso: elegir el selector adecuado para cada requisito.
4. Salida: la página igual a goal.png.
5. Dividir: conexión del CSS / colores / grosor / imágenes.
6. Diseñar → 7. Implementar → 8. Probar → 9. Corregir → 10. Mejorar.

Construcción paso a paso#

• Versión 1 — Conexión: crea style.css en la ruta correcta y escribe la regla de prueba que recomienda la profesora: * { background-color: red; }. Si la página se pone roja, el archivo está bien conectado. Luego bórrala.
• Versión 2 — Colores: una regla por cada id de color.
• Versión 3 — Grosor: una regla para la clase que agrupa los títulos de colores. Comprueba que el otro h2 siga en negrita.
• Versión final — Imágenes: una regla de elemento para img con height y width.

#red {
  color: red;
}

Pruebas#

🧪 Prueba y depuración#

Un compañero dice: "Mi CSS no hace nada". Su index.html tiene <link rel="stylesheet" href="./css/style.css" /> y su carpeta es:

color-vocab/
├── index.html
└── style.css

1. ¿Cuál es el problema?
2. Propón dos soluciones distintas. ¿Cuál respeta la restricción del proyecto?

Otro compañero escribió h2 { font-weight: normal; } y "funciona"… casi. ¿Qué requisito incumple?

⭐ Extensión del proyecto#

• Agrega cinco colores más con sus imágenes y estilos.
• Las imágenes que no son cuadradas se deforman al forzarlas a 200 × 200. Investiga en MDN la propiedad object-fit y úsala con el valor cover para evitarlo.
• Agrega debajo de cada palabra su pronunciación en un párrafo, con un estilo común definido por una clase.

Situación#

El comité ambiental del colegio quiere una página que enseñe a usar las canecas según el código de colores vigente en Colombia (Resolución 2184 de 2019 del Ministerio de Ambiente): blanca (aprovechables), negra (no aprovechables) y verde (orgánicos aprovechables).

Requisitos#

1. HTML completo con, para cada caneca: un título, una imagen con alt, y una lista de ejemplos de residuos que van en ella.
2. CSS externo en css/estilos.css.
3. Debes usar al menos una vez cada tipo de selector visto hoy: elemento, clase, id, atributo y universal.
4. Cada título debe verse del color de su caneca (ojo: ¿cómo harás legible un título blanco sobre fondo blanco?).
5. Una sección de "Errores comunes al separar" con un estilo que la distinga del resto.

Decisiones que debes tomar (y justificar)#

• ¿Qué elementos comparten estilo (clase) y cuáles son únicos (id)?
• ¿Dónde tiene sentido un selector de atributo? (Idea: resaltar las imágenes cuyo alt esté vacío, img[alt=""], mientras revisas la accesibilidad.)
• Verifica el contenido: consulta la resolución o una fuente oficial (Ministerio de Ambiente) para confirmar qué va en cada caneca. No te quedes con lo que "todo el mundo dice".

Casos de prueba#

• Si borras el <link>, la página sigue siendo comprensible (el contenido no depende del CSS).
• Todos los selectores tienen al menos un elemento al que se aplican (ninguna regla "huérfana").
• Una persona que no ve colores (por ejemplo, con daltonismo) puede identificar cada caneca por su texto, no solo por el color.

Etapa 3 (hoy): una sola hoja de estilos para todo el sitio#

1. Crea css/estilos.css y enlázalo desde index.html y desde unete.html. Usa la regla de prueba del fondo rojo para comprobar ambas conexiones.
2. Define un color institucional para los títulos con un selector de elemento.
3. Crea al menos una clase reutilizable (por ejemplo, .destacado para anuncios importantes) y úsala en las dos páginas.
4. Usa un id para un elemento único (por ejemplo, el lema del grupo).
5. No uses CSS en línea ni interno en esta etapa: justifica por escrito por qué el externo es la mejor opción para un sitio de varias páginas.
6. Entregable de la etapa: la carpeta del proyecto y una captura con y sin CSS (desactiva el <link> comentándolo <!-- ... -->) que demuestre que el HTML no cambió.

Conceptuales#

1. ¿Qué significa cada palabra de Cascading Style Sheets?
2. ¿Por qué <font> y <center> están obsoletos?
3. Nombra las tres formas de agregar CSS y di cuándo conviene cada una.
4. ¿Qué diferencia hay entre una clase y un id?
5. ¿Qué hacen rel y href en el elemento <link>?

Análisis de código#

Explica qué elementos resultan afectados por cada regla:

p { color: gray; }
.nota { font-size: 20px; }
#aviso { color: red; }
a[href] { color: purple; }

Predicción#

Con el CSS anterior, ¿de qué color será <p id="aviso" class="nota">¡Atención!</p>? ¿Y de qué tamaño? Anota tu respuesta y compruébala.

Depuración#

La regla no se aplica. ¿Por qué?

<link rel="stylesheet" href="estilos.css">
<h1 class="#titulo">Club de robótica</h1>

.titulo { color: teal; }

Modificación#

En el ejercicio de las tres formas, cambia external.html para que su h1 sea verde y esté centrado, sin tocar el HTML.

Creación#

Crea una página "Mi horario" con las materias de la semana en una lista. Con CSS externo: todas las materias en gris, las de tu área favorita con una clase que las resalte y la clase de hoy con un id que la ponga en otro color.