CSS es la capa de presentación. HTML dice que un bloque es un título; CSS dice el tamaño, la familia tipográfica, el color y el margen. Separarlas permite cambiar el aspecto del IES Duero sin reescribir el programa de la Semana de la Ciencia. En la práctica de esta lección el HTML y el CSS van en dos cajas y se juntan solo en la vista previa.
Una regla tiene un selector y un bloque de declaraciones. h1 { font-size: 2rem; color: #0E0E0C; } significa: para cada h1, aplica esas propiedades. El punto y coma separa declaraciones. Si falta, la siguiente propiedad se ignora o se interpreta mal. Los comentarios van entre /* y */. No uses //: eso es de otros lenguajes.
Tres sitios posibles: un atributo style en la etiqueta (solo para una prueba de un minuto), un <style> en el head (aceptable en una página suelta de clase) y un archivo estilos.css enlazado con <link rel="stylesheet" href="estilos.css"/>. El archivo aparte es el que conviene cuando hay más de una página: el programa y el plano del instituto comparten la misma hoja. La ruta del href es relativa, igual que en la lección 1. La hoja no lleva etiqueta html; es texto de reglas, no un documento.
Casi todo elemento es una caja: contenido, relleno (padding), borde y margen (margin). El margen empuja a los vecinos; el relleno es interior y suele heredar el fondo. Confundirlos hace que «el fondo no cubra el hueco». body trae margen del navegador: poner margin: 0 es una decisión consciente, no un ritual. Algunas propiedades se heredan (el color del texto, la familia tipográfica) y otras no (el margen, el borde). Si pintas body { color: #0E0E0C; }, los párrafos heredan ese color salvo que uno lo cambie.
La experiencia de usuario, en este curso, no es «que quede bonito». Es que se pueda leer, que el título se distinga del párrafo y que el enlace se reconozca. El contraste entre texto y fondo se mide con la relación de luminancias del WCAG. Para texto normal se pide al menos 4,5:1. Para texto grande (en torno a 24 px en regular, o 18 px en negrita) el umbral baja a 3:1. Carbón #0E0E0C sobre crema #FAF7F0 cumple de sobra. Ámbar #C4A15A como color de un párrafo largo sobre crema, no: el ámbar es acento, no tinta de lectura. Gris claro sobre blanco falla aunque «se vea moderno».
El laboratorio calcula esa relación en la propia página. No hace falta una web externa. Si el resultado queda por debajo de 4,5, se cambia el par de colores; no se disculpa con «en mi monitor se ve». Un proyector del salón de actos baja el contraste percibido: por eso el margen de 4,5 no se apura.
Una familia con serifa (Georgia, Palatino) funciona en títulos de una página de lectura. Una de palo seco (Segoe UI, sans-serif) funciona en menús y fichas. No hace falta una tercera familia «para que haya diseño». El tamaño de cuerpo no debería bajar de 16 px en pantalla. line-height alrededor de 1,5 evita el bloque compacto. La medida del renglón —cuántos caracteres por línea— se controla con max-width sobre main (unos 38–42 rem, o 65–75 caracteres). Una línea que cruza toda la ventana del proyector se lee mal.
Elemento (p), clase (.aviso), identificador (#programa) y agrupación (h1, h2). La clase se reutiliza; el identificador, no. No hace falta un selector de cinco niveles (body main section p span): se rompe en cuanto cambias el HTML. La cascada resuelve conflictos por origen, importancia, especificidad y orden. En la práctica gana, casi siempre, la regla más específica y, a igualdad, la que va más abajo en la hoja. Un !important es una alarma, no una herramienta de maquetación.
Pseudoclase útil: a:hover para el estado al pasar el cursor, y :focus para quien navega con teclado. Quitar el contorno de foco (outline: none) sin poner otro indicador deja a esa persona sin saber dónde está. No lo hagas en la entrega.
Comprobación antes de cerrar la lección: el HTML sigue teniendo sentido si quitas la hoja de estilo; el contraste del texto normal cumple 4,5:1; la hoja está enlazada con ruta relativa; no hay colores que signifiquen «error» solo por el rojo, sin una palabra que lo diga.
Selector. Qué elementos reciben la regla: un nombre de etiqueta, una clase o un id.
Declaración. Pareja propiedad: valor, terminada en punto y coma.
Clase. Atributo class. Se repite. En CSS se escribe con punto: .aviso.
Padding. Relleno interior de la caja. El fondo lo cubre.
Margin. Espacio exterior. No pinta el fondo del elemento.
Herencia. color y font-family pasan a los hijos; el margen, no.
Contraste. Relación de luminancias entre texto y fondo. 4,5:1 para texto normal.
max-width. Tope de anchura. Sirve para que la línea no sea interminable.
:focus. Estado de teclado. No se elimina el contorno sin poner otro.
link rel=stylesheet. Engancha el HTML con la hoja. El href es una ruta relativa.
Cada caso es una entrega realista del proyecto del IES Duero. Lee la situación antes de mirar la decisión.
Situación. Título en una serifa, párrafo en otra y el nav en una tercera «para que haya diseño».
No conviene. Dejarlas porque cada bloque es distinto.
Decisión. Una familia para el texto y, si acaso, la misma en negrita para el nav.
Por qué: Tres familias tipográficas obligan a reaprender el texto en cada bloque, y en una página de acto eso no aporta información. El diseño no consiste en cambiar de letra cada vez que cambia la zona. Basta una familia para el texto y, si hace falta, la misma en negrita para el nav.
Situación. Para ganar a una regla anterior se marca todo important.
No conviene. Seguir subiendo especificidad.
Decisión. Borrar la regla vieja o reordenarla. Reservar important para un caso que sepas nombrar.
Por qué: Marcar todo con !important no ordena la cascada: la apaga. Cada regla nueva tendrá que gritar más alto que la anterior y nadie podrá corregir un color sin otra alarma. Se borra o se reordena la regla vieja, y important se reserva para un caso que sepas nombrar.
Situación. Cada párrafo tiene id distinto y la clase no se usa.
No conviene. Porque así «no se pisan».
Decisión. Una clase .prosa para el aspecto común; id solo si hay un ancla.
Por qué: El id es un nombre propio, único en la página, y sirve para un ancla o un fragmento concreto. La clase es un oficio que se repite: el aspecto de todos los párrafos. Poner un id distinto en cada párrafo y no usar clases impide cambiar el estilo de una sola vez.
Situación. Las faltas van en rojo y no se dice la palabra «error».
No conviene. Porque el rojo ya se entiende.
Decisión. Escribir la palabra y, si se quiere, reforzar con color.
Por qué: Hay quien no distingue ese rojo, y hay quien imprime en gris. El color puede reforzar, pero la palabra «error» es el aviso que se lee sin depender del matiz. Si el texto no dice qué falla, el color es un código privado del autor.
Las ocho piezas son el contenido de la Semana de la Ciencia del IES Duero (Aranda de Duero). Se repiten en el bloque A para que compares decisiones, no para que copies el mismo archivo doce veces. Debajo va el documento marcado, listo para abrirlo en local, y la lectura de cada pieza.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Semana de la Ciencia · IES Duero</title>
<!-- Capa de esta lectura: lección 02. El texto del acto no cambia; cambia la decisión. -->
</head>
<body>
<header>
<p>IES Duero · Aranda de Duero</p>
<h1>Semana de la Ciencia</h1>
</header>
<nav aria-label="En la página">
<a href="#b1">Apertura en el salón de actos</a>
<a href="#b2">Taller de luz</a>
<a href="#b3">Taller de temperatura</a>
<a href="#b4">Visita al patio meteorológico</a>
<a href="#b5">Datos en la pizarra</a>
<a href="#b6">Preguntas</a>
<a href="#b7">Créditos y licencia de los materiales</a>
<a href="#b8">Cómo llegar</a>
</nav>
<main>
<section id="b1">
<h2>Apertura en el salón de actos</h2>
<p>A las 17:00 se abre el salón, no el laboratorio. El h1 de la página es el nombre del acto; este taller es un h2. Hay que decir el aforo (120 butacas) y que no se reserva sitio por mensaje: se entra por orden hasta completar. Quien llegue a las 17:20 oye el inicio, así que el primer párrafo no puede depender de un chiste que solo entiende quien estaba en la fila. El enlace interno #apertura permite saltar desde el nav.</p>
</section>
<section id="b2">
<h2>Taller de luz</h2>
<p>En el laboratorio de física hay una fotorresistencia de demostración. La página no enciende el sensor: explica la hora (17:30) y el grupo máximo (16 personas). El detalle del pin GPIO se cuenta en la lección 4 con un LED simulado; aquí, en la estructura, basta un párrafo y una lista de dos normas: no tocar la protoboard y anotar la lectura en el cuaderno, no en el móvil de otra persona.</p>
</section>
<section id="b3">
<h2>Taller de temperatura</h2>
<p>Segundo grupo, misma franja, aula de al lado. Si los dos talleres se mezclan en un solo párrafo, nadie sabe a qué puerta ir. Van en sections distintas, cada una con su h2. La temperatura se mide con un sensor digital de demostración del departamento; la página no publica la marca como si fuera un anuncio, solo el lugar y la duración (25 minutos).</p>
</section>
<section id="b4">
<h2>Visita al patio meteorológico</h2>
<p>Si llueve, este bloque se cae. Por eso el texto tiene la alternativa escrita (vídeo de tres gráficos en el salón), no un «ya veremos». En HTML la alternativa es una frase dentro de la misma section, no una imagen que sustituye al aviso. Plano general: el patio está detrás del gimnasio, puerta verde.</p>
</section>
<section id="b5">
<h2>Datos en la pizarra</h2>
<p>Al final se apuntan tres números: luz, temperatura y aforo real. Son una lista ordenada si el orden es el del acto, o desordenada si son datos sueltos. Elegimos ol porque se leen en ese orden en la puesta en común. Cada li es una frase corta, no un párrafo disfrazado.</p>
</section>
<section id="b6">
<h2>Preguntas</h2>
<p>Diez minutos. El heading es h2 «Preguntas», no h1: la página ya tiene dueño. Se recuerda que no hay turno de fotos al alumnado. Esa frase es texto, no un icono. Quien imprima la página en blanco y negro tiene que leerla igual.</p>
</section>
<section id="b7">
<h2>Créditos y licencia de los materiales</h2>
<p>El footer nombra al departamento de tecnología del IES Duero y dice que los textos de esta página son del centro para el acto. No se pega música ni fotos de banco de imágenes. Si más adelante hay un plano, será un SVG hecho en clase. La licencia concreta se estudiará en el bloque B; aquí basta no atribuirse lo que no es del instituto.</p>
</section>
<section id="b8">
<h2>Cómo llegar</h2>
<p>Calle San Francisco, Aranda de Duero. El autobús urbano deja en la plaza; desde allí, seis minutos a pie. No incrustamos un mapa de un proveedor externo: exige red y cookies. Un párrafo con la referencia basta, y en la lección 7 el mismo dato cabe en el cartel. La ruta relativa no interviene; esto es contenido, no un archivo.</p>
</section>
</main>
<footer><p>Material del departamento de Tecnología para el acto. Copia local, file://.</p></footer>
</body>
</html>A las 17:00 se abre el salón, no el laboratorio. El h1 de la página es el nombre del acto; este taller es un h2. Hay que decir el aforo (120 butacas) y que no se reserva sitio por mensaje: se entra por orden hasta completar. Quien llegue a las 17:20 oye el inicio, así que el primer párrafo no puede depender de un chiste que solo entiende quien estaba en la fila. El enlace interno #apertura permite saltar desde el nav.
Desde esta lección. En CSS, este h2 puede ser más grande que el párrafo, pero el párrafo conserva 4,5:1. No pintes el ámbar como color de este texto.
En el laboratorio de física hay una fotorresistencia de demostración. La página no enciende el sensor: explica la hora (17:30) y el grupo máximo (16 personas). El detalle del pin GPIO se cuenta en la lección 4 con un LED simulado; aquí, en la estructura, basta un párrafo y una lista de dos normas: no tocar la protoboard y anotar la lectura en el cuaderno, no en el móvil de otra persona.
Desde esta lección. En CSS, este h2 puede ser más grande que el párrafo, pero el párrafo conserva 4,5:1. No pintes el ámbar como color de este texto.
Segundo grupo, misma franja, aula de al lado. Si los dos talleres se mezclan en un solo párrafo, nadie sabe a qué puerta ir. Van en sections distintas, cada una con su h2. La temperatura se mide con un sensor digital de demostración del departamento; la página no publica la marca como si fuera un anuncio, solo el lugar y la duración (25 minutos).
Desde esta lección. En CSS, este h2 puede ser más grande que el párrafo, pero el párrafo conserva 4,5:1. No pintes el ámbar como color de este texto.
Si llueve, este bloque se cae. Por eso el texto tiene la alternativa escrita (vídeo de tres gráficos en el salón), no un «ya veremos». En HTML la alternativa es una frase dentro de la misma section, no una imagen que sustituye al aviso. Plano general: el patio está detrás del gimnasio, puerta verde.
Desde esta lección. En CSS, este h2 puede ser más grande que el párrafo, pero el párrafo conserva 4,5:1. No pintes el ámbar como color de este texto.
Al final se apuntan tres números: luz, temperatura y aforo real. Son una lista ordenada si el orden es el del acto, o desordenada si son datos sueltos. Elegimos ol porque se leen en ese orden en la puesta en común. Cada li es una frase corta, no un párrafo disfrazado.
Desde esta lección. En CSS, este h2 puede ser más grande que el párrafo, pero el párrafo conserva 4,5:1. No pintes el ámbar como color de este texto.
Diez minutos. El heading es h2 «Preguntas», no h1: la página ya tiene dueño. Se recuerda que no hay turno de fotos al alumnado. Esa frase es texto, no un icono. Quien imprima la página en blanco y negro tiene que leerla igual.
Desde esta lección. En CSS, este h2 puede ser más grande que el párrafo, pero el párrafo conserva 4,5:1. No pintes el ámbar como color de este texto.
El footer nombra al departamento de tecnología del IES Duero y dice que los textos de esta página son del centro para el acto. No se pega música ni fotos de banco de imágenes. Si más adelante hay un plano, será un SVG hecho en clase. La licencia concreta se estudiará en el bloque B; aquí basta no atribuirse lo que no es del instituto.
Desde esta lección. En CSS, este h2 puede ser más grande que el párrafo, pero el párrafo conserva 4,5:1. No pintes el ámbar como color de este texto.
Calle San Francisco, Aranda de Duero. El autobús urbano deja en la plaza; desde allí, seis minutos a pie. No incrustamos un mapa de un proveedor externo: exige red y cookies. Un párrafo con la referencia basta, y en la lección 7 el mismo dato cabe en el cartel. La ruta relativa no interviene; esto es contenido, no un archivo.
Desde esta lección. En CSS, este h2 puede ser más grande que el párrafo, pero el párrafo conserva 4,5:1. No pintes el ámbar como color de este texto.
| Criterio | Aún no | En proceso | Conseguido | Notable |
|---|---|---|---|---|
| Capa | Estilo en cada etiqueta | style en el head | Hoja enlazada | La hoja sirve a dos páginas |
| Contraste | No se ha medido | Medido y por debajo | ≥ 4,5:1 en texto normal | También el botón o el enlace |
| Caja | Sin márgenes conscientes | Todo a cero | padding y margin distinguibles | max-width en el texto |
| Foco | outline eliminado | Solo hover | Foco visible | Se prueba con teclado |
| Retirada | Sin CSS no se entiende | Se entiende a medias | Se entiende | El HTML no llevaba tamaños forzados |
HTML con sentido solo, CSS en su hoja, contraste de 4,5:1 en el texto normal y un renglón que no cruza toda la ventana.
Abre cada pregunta, responde en el cuaderno y después mira la solución. El párrafo «Por qué» es la parte que se estudia.
Respuesta. No para texto normal. El umbral de referencia es 4,5:1.
Por qué: 4,2:1 se queda por debajo del umbral de referencia para texto normal, que es 4,5:1, aunque en tu pantalla crema se lea bien. El contraste se mide con los dos colores del par, no con la sensación de un monitor concreto. Un párrafo de 16 px no es un rótulo grande: necesita ese mínimo.
Respuesta. El padding es interior y suele llevar el fondo; el margin es exterior y transparente.
Por qué: Si pintas una ficha y el hueco de dentro queda del color de la página, has usado margin donde querías padding. La caja del modelo no es vocabulario: es el motivo de que el fondo no cubra.
Respuesta. Porque quita la única señal de foco para quien no usa el ratón, salvo que pongas otra.
Por qué: outline: none quita el anillo que señala el enlace cuando se llega con el teclado. Quien no usa el ratón se queda sin saber dónde está el foco, aunque el diseño parezca más limpio. Si lo quitas, tienes que poner otra señal visible, no dejar el foco mudo.
En la vida real
Escribes y dibujas aquí mismo: no hay salto a otro módulo. La misma herramienta, a pantalla completa, está en l02-css-basico-y-experiencia-de-usuario.html y en el marco (útil si el navegador permite file:// en iframes).
Escribe estilos.css para la página de la lección 1 y una segunda página lugar.html que enlace la misma hoja. Cuerpo a 18 px como mínimo, main con max-width, carbón sobre crema, ámbar solo en una franja o en un borde. Mide el contraste de tu par de colores en el laboratorio. Una buena entrega sigue leyéndose si renombras la hoja y el HTML queda «feo».
reto_id: bach1-tic-L02