CSS y diseño de interfaces · Lección 01 / 12

Dar forma sin perder significado

El taller de ideas ya tiene contenido. Ahora cuidaremos cómo se lee y cómo encontrar sus caminos.

Vamos a descubrir juntos

1
HTML organiza contenido; CSS describe su presentación. El navegador ya tiene estilos predeterminados, así que una página sin tu CSS no queda vacía. Un h1 sigue siendo encabezado aunque cambie su color.
2
En .sample { color: #15364c; }, .sample es el selector, color la propiedad y #15364c su valor. Las declaraciones van entre llaves y se separan con punto y coma. El navegador suele ignorar una propiedad desconocida.
3
El proyecto reúne HTML y CSS en un archivo: edita <style id="lesson-css"> en el espacio de archivos. También puedes usar una hoja externa con <link rel="stylesheet" href="style.css">; ambos archivos deben guardarse juntos.
4
Cambia el color de .sample y actualiza la vista previa. El taller aplica el bloque CSS al HTML proporcionado; comprueba cambios de HTML en el archivo descargado. La vista previa acepta el CSS enseñado sin recursos externos.

Taller: una interfaz, distintos espacios

Edita <style id="lesson-css"> en “Mis archivos y GitHub”. La vista previa aplica ese CSS al HTML proporcionado; revisa cambios de HTML en el archivo descargado. Aquí no se aceptan recursos externos ni CSS fuera del conjunto de estudio.

Ir a mi códigoAnchura del documento de vista previa

Las medidas describen esta vista, no garantizan todos los tamaños ni accesibilidad completa. Prueba contenido largo, zoom, teclado y tecnologías de asistencia en el proyecto local.

Laboratorio de contraste de dos colores

Color del textoColor del fondo

Razón aproximada ·

Cálculo solo para dos colores sRGB opacos elegidos aquí; no lee tu página. El límite usa la razón sin redondear. No evalúa transparencia, degradados, imágenes, estados ni conformidad completa.

El código cambió. Aplica de nuevo para observar esta versión.CSS aplicado. Compara las medidas y prueba el teclado dentro de la vista previa.No se pudo aplicar. Conserva un único style con id lesson-css, hasta 65.536 caracteres y el CSS enseñado, sin URLs, imports, escapes ni reglas externas. El navegador puede ignorar propiedades inválidas; no es un validador completo.Página de estudio con tu CSSSíNoMovimiento reducidoSin preferencia de reducciónEl par alcanza 4,5:1 para texto común.El par queda por debajo de 4,5:1 para texto común.<a href="#conteudo">Saltar al contenido</a> <header class="hero"><p>RULLST ACADEMY · CSS</p><h1>Taller de ideas: una interfaz que se adapta</h1><p>Dibujar, probar y revisar con espacio para aprender.</p> <nav class="nav" aria-label="Navegación principal"><a href="#programa">Ver programa</a><a href="#laboratorio">Explorar laboratorio</a><a href="#revisao">Leer revisión</a></nav></header> <main id="conteudo" tabindex="-1"><section id="programa"><h2>Tres formas de aprender</h2><div class="cards"> <article class="card featured"><h3>01 · Crear</h3><p>Convierte una pregunta en una idea que pueda probarse.</p></article> <article class="card"><h3>02 · Probar</h3><p>Compara tu predicción con una observación concreta.</p></article> <article class="card"><h3>03 · Revisar</h3><p>Mejora una decisión y explica lo que falta comprobar.</p></article></div></section> <section id="laboratorio" class="lab"><h2>Laboratorio de lectura y espacio</h2><p class="sample">Este párrafo es la muestra de color y tipografía. El contenido debe seguir visible al cambiar espacio o fuente.</p><p class="measure">Una caja para medir.</p><button type="button">Botón de práctica, sin acción</button></section> <section id="revisao"><h2>¿Qué observaste?</h2><p>Registra anchura, contenido, teclado, contraste y movimiento. Una medida no demuestra todos los escenarios.</p></section></main> <footer><p>Proyecto ficticio de estudio. Sin registro, envío ni datos personales.</p></footer>

Enlaces oficiales y siguiente paso

Referencia para investigar

✦

TU MISIÓN

Localizar una regla CSS y observar su efecto conservando HTML semántico.

Llévatelo contigo

Cambia una declaración cada vez y anota predicción y resultado. Descarga el HTML editado, ábrelo, guarda otro cambio y recarga.

A tu ritmo

Mis archivos y GitHub

Cada lección puede convertirse en un registro propio: código, notas o un plan de práctica. Guardar un archivo en GitHub es opcional y no cambia tus XP.

Manual del alumno

El editor y las descargas se abren cuando esta lección esté disponible para tu cuenta. Revisa el acceso indicado abajo o vuelve al mapa de la ruta.

Comprobando tu acceso a esta lección…

Tu camino, paso a paso

Descargar material de la actividad

Descarga el ejemplo de la lección y un cuaderno para tus notas. El ZIP incluye una guía para organizar actividades en uno o varios repositorios. Publicar es opcional; las cuentas habilitadas también pueden usar el botón de envío a GitHub.

Tu archivo de esta lección

Edita el ejemplo o registra lo aprendido. Este espacio no ejecuta código ni corrige respuestas. El borrador se guarda solo en este navegador, separado por cuenta; tú decides cuándo descargar o enviar a GitHub.

El ejemplo puede ser solo un fragmento o una guía. Cambiar la extensión no lo convierte en un programa completo. El ZIP de la actividad contiene material inicial; el botón de archivo editado descarga tu texto.

Mi código o mis notas

<!doctype html>
<html lang="es"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; base-uri 'none'; form-action 'none'">
<title>Taller de ideas: una interfaz que se adapta</title>
<style id="lesson-css">
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; padding: 1rem; font-family: system-ui, sans-serif; line-height: 1.6; color: #15364c; background-color: #eef4f7; }
main, header, footer { max-width: 64rem; margin: 0 auto 1.25rem; }
h1, h2, h3 { line-height: 1.2; }
h1 { font-size: 2rem; }
a { color: #07598a; text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 3px solid #a13c00; outline-offset: 4px; }
.hero, .card, .lab { background-color: #ffffff; border: 1px solid #a4bac8; border-radius: 1rem; padding: 1rem; margin-bottom: 1rem; }
.cards { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; margin-bottom: 1rem; }
.card { min-width: 0; margin-bottom: 0; }
.nav a { display: inline-block; padding: .5rem; }
.sample { color: #15364c; background-color: #ffffff; }
.measure { width: 200px; padding: 20px; border: 2px solid #15364c; box-sizing: border-box; background-color: #e1f4ed; }
button { font: inherit; padding: .75rem 1rem; border: 2px solid #15364c; border-radius: .5rem; background-color: #15364c; color: #ffffff; cursor: pointer; }
p, li, a { overflow-wrap: anywhere; }
</style></head><body>
<a href="#conteudo">Saltar al contenido</a>
<header class="hero"><p>RULLST ACADEMY · CSS</p><h1>Taller de ideas: una interfaz que se adapta</h1><p>Dibujar, probar y revisar con espacio para aprender.</p>
<nav class="nav" aria-label="Navegación principal"><a href="#programa">Ver programa</a><a href="#laboratorio">Explorar laboratorio</a><a href="#revisao">Leer revisión</a></nav></header>
<main id="conteudo" tabindex="-1"><section id="programa"><h2>Tres formas de aprender</h2><div class="cards">
<article class="card featured"><h3>01 · Crear</h3><p>Convierte una pregunta en una idea que pueda probarse.</p></article>
<article class="card"><h3>02 · Probar</h3><p>Compara tu predicción con una observación concreta.</p></article>
<article class="card"><h3>03 · Revisar</h3><p>Mejora una decisión y explica lo que falta comprobar.</p></article></div></section>
<section id="laboratorio" class="lab"><h2>Laboratorio de lectura y espacio</h2><p class="sample">Este párrafo es la muestra de color y tipografía. El contenido debe seguir visible al cambiar espacio o fuente.</p><p class="measure">Una caja para medir.</p><button type="button">Botón de práctica, sin acción</button></section>
<section id="revisao"><h2>¿Qué observaste?</h2><p>Registra anchura, contenido, teclado, contraste y movimiento. Una medida no demuestra todos los escenarios.</p></section></main>
<footer><p>Proyecto ficticio de estudio. Sin registro, envío ni datos personales.</p></footer>
</body></html>

Formato del archivo

Tu texto se guardará en este navegador al editarlo. En un equipo compartido, borra los borradores al terminar.

El envío directo acepta hasta 8 KiB de texto en un archivo. Usa las descargas y la guía manual para proyectos con varios archivos.

Dar forma sin perder significado

Vamos a descubrir juntos

Taller: una interfaz, distintos espacios

Medidas observadas en la vista previa

Laboratorio de contraste de dos colores

Enlaces oficiales y siguiente paso

Ahora te toca

Predice, cambia, compara

Llévatelo contigo

Mis archivos y GitHub

Tu archivo de esta lección

Guardar en mi GitHub

Rullstpetbot