Cómo se aplica CSS y quién gana

Tres horas. Media hora para entender cómo se enlaza una hoja, cómo se elige un selector y qué decide un conflicto entre dos reglas, y dos horas y media dando estilo a tu sitio y diagnosticando quién gana.

Se explica

25 minutos · conceptos y demostración

Hoy entra el lenguaje entero en su forma mínima: una hoja, una regla, un selector y un criterio para decidir quién gana cuando dos reglas se contradicen. El catálogo de selectores queda como material de consulta dentro del paso que lo usa.

El navegador ya estaba aplicando CSS

Cuando escribiste esto en la UD1:

<h1>PixelStore</h1>

el título se veía grande y en negrita. Eso no es «lo natural»: es una hoja de estilos que trae el navegador de fábrica, la hoja de usuario-agente. Nunca has trabajado sin CSS. Lo que vamos a hacer es tomar el control.

Las tres formas, y por qué usamos una

La hoja externa gana por tres razones concretas: una sola definición sirve para las cuatro páginas, el navegador se la guarda en caché y no vuelve a descargarla, y el estilo queda separado del contenido, que es la idea entera de estas dos unidades.

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

Fíjate en que es una ruta relativa, como las de la UD1. Si una página estuviera dentro de una carpeta, sería ../css/styles.css.

Cómo funciona una regla

h1 {
    color: navy;
}

h1       selector      a qué elementos afecta
color    propiedad     qué característica cambio
navy     valor         qué valor le doy

La regla se lee así: «selecciona todos los h1 y cambia su propiedad color». Al conjunto de propiedad y valor se le llama declaración, y van separadas por punto y coma:

body {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
    color: #222;
}

Regla

Un selector más el bloque de declaraciones que se le aplican. Una hoja de estilos es una lista de reglas.

Los comentarios se escriben solo de una forma. // no funciona, aunque el editor a veces lo coloree como si lo hiciera:

/* Sistema tipográfico base */
body {
    font-family: system-ui, sans-serif;
}

Los selectores, en tres familias

Un selector responde a «¿a qué te refieres?», y hay tres maneras de responder.

Por lo que el elemento es. p, a, h1. Afecta a todos los del sitio: útil para las bases, peligroso para algo específico.

Por el papel que le das. Una clase, que se repite en tantos elementos como quieras y describe una función:

<article class="card producto destacado">

.destacado { font-weight: 700; }

Es el selector que más vas a usar. El id también funciona, pero es único en la página y pesa demasiado en los conflictos. Regla práctica: los id son para enlazar y para los label; las clases son para dar estilo.

Por lo que el documento ya declara. Su posición, su estado o sus atributos:

nav a          { }   /* cualquier enlace dentro de nav */
input:required { }   /* el campo es obligatorio */
li:first-child { }   /* es el primer hijo de su padre */
a[href^="http"]{ }   /* enlaces externos */

Pseudo-clase

Un selector que depende del estado o de la posición del elemento, no de su marcado. Se escribe con dos puntos y no existe en el HTML: la calcula el navegador.

Aquí se comprueba el efecto de lo que hiciste en la UD1: si escribiste type="email" en lugar de type="text", ahora tienes un selector. El HTML bien marcado te devuelve selectores, y esa es la razón de que inventar una clase para algo que el documento ya dice sea duplicar la información en dos sitios.

La palabra «cascading» no es decorativa

CSS significa Cascading Style Sheets. Hojas de estilo en cascada. Esa palabra describe el mecanismo central del lenguaje: varias reglas pueden querer cambiar la misma propiedad del mismo elemento, y hace falta un criterio para decidir.

p          { color: blue; }
.destacado { color: red; }

<p class="destacado">Hola</p>

Se ve rojo. La pregunta relevante es por qué.

Especificidad

Una medida de cuán concreto es un selector. Funciona como un orden de prioridad que basta con conocer, sin necesidad de calcularlo manualmente.

Una regla práctica evita la aritmética: una clase gana a cualquier cantidad de elementos, y un id gana a cualquier cantidad de clases. Por eso #productos p gana a body main section article p, aunque el segundo parezca más trabajado. De ahí sale el consejo anterior: si das estilo con id, cualquier ajuste posterior con clases no podrá corregirlo.

Cuando hay empate de especificidad decide el orden, y gana la última escrita:

.boton { background: blue; }
.boton { background: green; }

Gana el verde. Por eso el orden de tu hoja importa, y por eso conviene escribir de lo general a lo particular.

Herencia

Algunas propiedades pasan de un elemento a sus descendientes, de modo que basta declararlas una vez en body:

La lógica es razonable: lo que se hereda tiene que ver con el texto, y lo que no, con la caja. Que un padding se heredara sería un desastre.

!important y cómo se lee un conflicto

color: red !important;

Existe, gana casi siempre, y no es el botón de arreglar CSS.

Esa pregunta se responde en DevTools. Selecciona un elemento y ve a la pestaña Styles: verás las reglas que le afectan ordenadas de la que gana a la que pierde, con las declaraciones derrotadas tachadas y, a la derecha, el archivo y la línea donde se escribió cada una. La pestaña Computed da el valor final de cada propiedad, ya resuelto el conflicto.

Se trabaja

150 minutos · práctica sobre tu propio proyecto

Los dos primeros pasos ponen en marcha la hoja y eligen selectores; los cuatro últimos entran en los conflictos, que es donde se pierde el tiempo cuando no se sabe diagnosticar.

Paso 1 · Tu primer estilo · 25 min

Sobre tu proyecto de la UD1:

1. Crea la carpeta css/ y dentro styles.css.
2. Enlázalo en las cuatro páginas.
3. Cambia la tipografía general del sitio desde body.
4. Da un color distinto a los encabezados.
5. Cambia el aspecto de los enlaces.
6. Comprueba que el estilo se aplica en las cuatro.

Antes de continuar: las cuatro páginas cargan la hoja, comprobado en Network y no por su apariencia, y el HTML no se ha tocado salvo para añadir el link.

Paso 2 · El selector correcto · 35 min

Para cada requisito, escribe el selector que le corresponde. No vale cualquiera que funcione: vale el que expresa lo que pide el enunciado.

2.1 · Ejemplo resuelto

Requisito: los enlaces del pie no deben subrayarse, pero los del contenido sí.

¿Qué me piden seleccionar?

Enlaces, pero solo los de una zona concreta del documento.

¿Cómo está marcada esa zona?

En la UD1 el pie es un footer. Ya tengo por dónde acotar.

¿Descendiente o hijo directo?

Descendiente: los enlaces pueden estar dentro de párrafos o de listas, no necesariamente colgando del footer.

Selector

footer a { text-decoration: none; }

No ha hecho falta inventar ninguna clase. Si el HTML ya distingue esa zona, el selector sale solo.

2.2 · Ahora tú

1. Todos los enlaces de la navegación principal deben cambiar de aspecto.
2. El primer producto del catálogo debe destacarse.
3. Los campos obligatorios del formulario deben distinguirse.
4. Los enlaces externos deben poder marcarse de forma distinta a los internos.
5. Solo los párrafos que están dentro de una ficha de producto, no todos los del sitio.

p { line-height: 1.6; }

.destacado { font-weight: 700; }

#productos { padding-block: 3rem; }

nav a {          /* cualquier enlace dentro de nav, a la profundidad que sea */
    text-decoration: none;
}

nav > ul {       /* solo las listas que son hijas directas de nav */
    display: flex;
}

input[type="email"] {
    border-color: #999;
}

a[href^="http"] {     /* enlaces cuyo href empieza por http: los externos */
    ...
}

a:hover        { }   /* el cursor está encima */
a:focus-visible{ }   /* tiene el foco de teclado */
li:first-child { }   /* es el primer hijo de su padre */
li:last-child  { }   /* es el último */
input:required { }   /* el campo es obligatorio */
input:invalid  { }   /* su valor no cumple la validación */

h1, h2, h3 {
    line-height: 1.15;
}

Paso 3 · ¿Quién está ganando? · 35 min

Este HTML y este CSS conviven:

<main id="contenido">
  <section class="bloque">
    <p class="aviso destacado">Envío gratuito a partir de 50 €.</p>
  </section>
</main>

p                      { color: #333; }
.aviso                 { color: green; }
.destacado             { color: orange; }
#contenido p           { color: navy; }
section .aviso         { color: purple; }
main section p.aviso   { color: teal; }

3.1 · Ejemplo resuelto

¿Cuántos id hay en juego?

Solo uno: #contenido p. Como el id gana a cualquier cantidad de clases, ese es el candidato inmediato.

¿Le puede ganar alguna otra?

No. main section p.aviso tiene una clase y tres elementos, y sigue por debajo de un id.

¿Importa el orden?

Aquí no, porque no hay empate en especificidad. El orden solo decide entre iguales.

Resultado

navy. Al eliminar la regla del id, prevalecería main section p.aviso, que es teal.

3.2 · Ahora tú

1. Comprueba en el navegador que el color es el que dice el razonamiento.
2. Borra la regla del id y predice el nuevo color antes de recargar. Después comprueba.
3. Ahora consigue que el párrafo se vea naranja sin usar !important y sin tocar el HTML. Hay más de una solución válida: explica la que elijas.
4. Abre DevTools y localiza cuántas declaraciones de color aparecen tachadas.

Paso 4 · La regla que no hace nada · 15 min

.card .titulo {
    color: crimson;
}

<article class="card">
    <h3 class="titulo">Portátil Nova 14</h3>
</article>

El título no se ve rojo, y DevTools no muestra la regla ni siquiera tachada. ¿Qué está pasando?

Paso 5 · Cinco selectores reales en tu sitio · 25 min

Lleva al proyecto lo del paso 2. Escribe cinco reglas que usen, cada una, una familia distinta de selector, y anota en un comentario por qué ese y no otro:

1. Una que acote por una zona semántica de la UD1 (nav, main, footer…).
2. Una que use una clase que describa un papel, no una apariencia.
3. Una que se apoye en un atributo que ya está en tu HTML.
4. Una que use una pseudo-clase de estado o de posición.
5. Una que agrupe varios selectores con la coma.

Si alguna te obliga a añadir una clase al HTML, pregúntate antes si el documento ya lo decía de otra forma. Si te obliga a inventar un id, es que no era el camino.

Paso 6 · Auditoría de tu propia hoja · 15 min

Recorre styles.css de arriba abajo y responde:

Corrige los cuatro grupos. Los nombres del tipo .azul o .texto-grande se renombran por lo que significan: el día que el azul pase a verde, la clase .azul miente.

Ampliación si has completado el trabajo

Primero termina y comprueba los seis pasos. Los dos retos trabajan con hojas que no has escrito tú, que es como llegan los proyectos reales.

Reto 1 · La hoja heredada

Recibes esta hoja de un proyecto anterior. Funciona, y es un desastre.

#main .content p.text { color: #444 !important; }
#main .content p { color: #888; }
.text { color: #222; }
p { color: #000; }

#nav ul li a { text-decoration: none !important; }
#nav ul li a:hover { text-decoration: underline; }

.boton-azul { background: #1a5fb4; color: white; }
.boton-azul-grande { background: #1a5fb4; color: white; padding: 1rem 2rem; }
#formulario input { border: 1px solid #ccc !important; }

Reescríbela entera con una condición: ningún !important y ningún id como selector de estilo, manteniendo exactamente el mismo resultado visual.

1. Antes de tocar nada, escribe qué color acaba teniendo un <p class="text"> dentro de #main .content, y por qué. Compruébalo después.
2. El !important de la navegación tiene un efecto que quizá no era el buscado: averigua qué le ocurre al subrayado del :hover y explícalo.
3. Las dos clases de botón repiten dos declaraciones. Resuélvelo sin duplicar, y di qué has hecho con el nombre de las clases.
4. Anota cuántas líneas tiene tu versión frente a la original.

Reto 2 · Seis conflictos, predichos antes de mirar

Para cada pareja, predice por escrito qué regla gana y por qué, antes de probar nada. Después móntalo y comprueba.

La fila 4 no se decide igual que las demás: piénsala dos veces antes de escribir el motivo.

Cierre

5 minutos · comprobación y recuerdo