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

Cuando dos reglas discrepan

La última regla no siempre gana. Descubriremos por qué con un caso pequeño.

Vamos a descubrir juntos

1
Propiedades como color y font-family suelen heredarse; margin y border no se heredan por defecto. Una regla aplicada directamente puede sustituir un valor que llegaría por herencia.
2
Aquí todas son reglas normales del autor, sin capas ni estilos inline. En este contexto .sample es más específica que p; un id pesa más que una clase. La cascada completa considera origen, importancia y capas antes de especificidad.
3
Cuando las condiciones anteriores empatan, gana la declaración posterior. Dos reglas .sample con colores distintos usan la última. !important cambia la prioridad; no arregla todos los conflictos ni hace comprensible una hoja.
4
Predice el color de la muestra, aplica y revisa su color calculado. Intercambia las dos reglas de clase. En el archivo local, el panel Styles/Estilos del navegador ayuda a identificar declaraciones sobrescritas.

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

Comparar herencia, especificidad y orden en reglas normales del mismo origen.

Llévatelo contigo

Haz dos predicciones: clase frente a elemento y después dos clases iguales. Anota la regla ganadora y el motivo.

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; }
.sample { color: navy; }
p { color: #77220b; }
.sample { color: #205447; }
</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.

Cuando dos reglas discrepan

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