CSS

CSS es un estándar del W3C con tipo MIME text/css. Su razón de ser es separar el contenido de la presentación: el HTML dice qué es cada cosa y el CSS dice cómo se ve. Gracias a esa separación se puede cambiar el aspecto entero de una web tocando un solo fichero, y se puede servir un aspecto distinto para pantalla y para impresión sin duplicar el contenido.

La sintaxis es siempre la misma: un selector que dice a qué elementos se aplica la regla, y entre llaves una lista de declaraciones de la forma propiedad dos puntos valor, separadas por punto y coma. El último punto y coma es opcional, pero se pone por costumbre para que añadir una línea después no obligue a tocar la anterior.

/* Un selector y tres declaraciones */
.tarjeta-tema {
  background: #f4f7f5;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Los prefijos de fabricante son propiedades experimentales de un motor
   concreto; hoy casi nunca hacen falta, pero salen en el temario. */
.tarjeta-tema {
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

La novedad de CSS3 que más cambia la forma de trabajar no es visual sino organizativa: dejó de haber una especificación monolítica y el estándar se partió en módulos (selectores, colores, cascada, cajas, media queries, fondos), cada uno con su propio ritmo de avance. Por eso ya no tiene sentido hablar de «CSS 4»: cada módulo lleva su numeración.

En CSS todo elemento es una caja rectangular, y esa caja tiene cuatro capas concéntricas. En el centro está el contenido, que es el texto o la imagen. A su alrededor, el relleno o padding, que es espacio interior: sigue siendo parte de la caja y toma su color de fondo. Después el borde, que es la línea que la delimita. Y por fuera el margen, que es espacio exterior, transparente, y sirve para separar esta caja de las vecinas.

.tarjeta-tema {
  width: 300px;      /* ancho del contenido */
  padding: 16px;     /* relleno interior, con fondo */
  border: 2px solid #2f7d5b;
  margin: 24px;      /* separación exterior, transparente */
}

/* Con el modelo clásico esa tarjeta ocupa
   300 + 16*2 + 2*2 = 336 px de ancho visible.
   Con box-sizing: border-box el ancho declarado incluye
   relleno y borde, y la tarjeta mide 300 px en total. */
.tarjeta-tema {
  box-sizing: border-box;
}

El relleno va por dentro del borde y el margen por fuera. Si un fondo de color se está saliendo más de la cuenta, el culpable es el padding; si dos cajas se pegan, el que falta es el margin.

Un selector es el símbolo o la combinación de símbolos con la que se indica a qué conjunto de elementos del árbol del documento se aplica una regla. Es la parte de CSS que más se pregunta, porque además es la misma sintaxis que usan querySelector en JavaScript y varios frameworks de pruebas.

Los selectores de atributo permiten filtrar por lo que valga un atributo, y son la base de las bibliotecas de componentes. Con E[atr] se cogen los elementos que tengan ese atributo definido, sea cual sea su valor, lo que en la práctica sirve para detectar marcado incompleto. Con E[atr^="algo"] los que empiecen por ese texto, con E[atr$="algo"] los que terminen en él, con E[atr*="algo"] los que lo contengan, y con E[atr~="algo"] aquellos cuyo valor sea una lista separada por espacios y contenga esa palabra completa.

/* Todos los enlaces del panel lateral, a cualquier profundidad */
aside a { color: #2f7d5b; }

/* Solo los enlaces que cuelgan directamente del menú */
nav > a { font-weight: 600; }

/* El párrafo que va justo detrás de cada título de subtema */
h2 + p { font-size: 1.1rem; }

/* Temas ya superados y temas todavía pendientes */
li[data-estado="superado"]  { opacity: 0.6; }
li[data-estado^="pend"]     { font-weight: bold; }

/* Enlaces a documentos PDF del temario */
a[href$=".pdf"]::after { content: " (PDF)"; }

Esa misma sintaxis se usa desde JavaScript con la API Selectors: document.querySelector devuelve el primer elemento que cumpla la condición y document.querySelectorAll devuelve todos, en forma de lista de nodos.

La cascada es el mecanismo que resuelve los conflictos: cuando dos o más reglas quieren fijar la misma propiedad del mismo elemento, hay que decidir cuál gana. La decisión se toma en tres pasadas, y solo se pasa a la siguiente si la anterior queda empatada.

1. 1Importancia: se mira el origen de la declaración y si lleva !important.
2. 2Especificidad: si la importancia empata, gana el selector más específico.
3. 3Orden de aparición: si también empata la especificidad, gana la última declaración escrita.

La declaración !important salta por encima de todo eso: fuerza a que esa declaración gane aunque su selector sea menos específico. Dentro del propio !important el orden de importancia va, de más fuerte a más débil, del !important del usuario al !important del autor, luego la declaración normal del autor, la del usuario y por último la del navegador. Por eso, un !important puesto por el usuario para agrandar la letra por accesibilidad no se lo puede pisar la web.

/* Especificidad de menos a más: gana el último de estos tres
   para el <li id="tema-7" class="superado"> */
li              { color: #333; }   /* etiqueta      */
.superado       { color: green; }  /* clase         */
#tema-7         { color: navy; }   /* identificador */

/* Empate de especificidad: gana la última escrita */
.superado { color: green; }
.superado { color: teal; }   /* esta es la que se aplica */

La herencia es otro mecanismo distinto y conviene no mezclarlo con la cascada: consiste en que ciertas propiedades de un elemento padre se transmiten solas a sus hijos sin necesidad de repetirlas. Heredan las propiedades relacionadas con el texto (las de la familia font-, color, las de la familia text-, line-height) y no heredan las que tienen que ver con la caja, como los márgenes, los bordes o el fondo. Cuando hace falta forzar la herencia de una propiedad que no la tiene, se le da el valor inherit.

Cascada es «qué regla gana cuando varias chocan». Herencia es «qué se transmite del padre al hijo cuando no hay ninguna regla». Son preguntas distintas y se confunden en el examen.

La propiedad position decide respecto a qué se coloca una caja. Sus valores se acompañan de los desplazamientos top, bottom, left y right, y de z-index, que ordena las cajas en profundidad: el eje Z crece hacia el usuario, de modo que a mayor z-index más cerca queda la caja y más tapa a las demás.

Aparte de position están las dos propiedades de flotación clásicas. float con valor left o right saca un elemento del flujo normal y lo pega a un lado de su contenedor, dejando que el texto lo rodee. clear con valor left, right o both indica que un elemento no admite flotantes a su lado y lo empuja por debajo de ellos.

La propiedad display decide qué tipo de caja genera un elemento. Los valores clásicos son block, que ocupa todo el ancho y va en línea nueva; inline, que fluye dentro del texto y no admite ancho ni alto; inline-block, que fluye como el texto pero sí admite dimensiones; y none, que hace que el elemento no se renderice en absoluto. Los valores modernos son flex y grid, los dos modelos de maquetación de CSS3.

display: none quita el elemento y también su hueco, como si no existiera. visibility: hidden lo hace invisible pero le deja el hueco reservado. Es la comparación clásica de esta parte.

CSS distingue unidades absolutas, cuyo valor no depende de nada, y unidades relativas, cuyo valor depende de otra medida. Las absolutas sirven para impresión; para pantalla, donde el tamaño de la ventana y las preferencias del usuario varían, se usan casi siempre las relativas.

La diferencia entre em y rem es la que más se pregunta: em se acumula, porque cada nivel se mide sobre su padre, de modo que tres cajas anidadas a 1.2em multiplican el tamaño tres veces; rem siempre se mide sobre la raíz, así que no se acumula y es más predecible.

Para las tipografías, la regla @font-face permite instalar en la página una fuente que el usuario no tiene, indicando dónde descargarla con src y qué nombre le damos con font-family. El formato pensado para la web es WOFF (Web Open Font Format), que comprime la fuente para que viaje ligera; por debajo, las tipografías escalables son OpenType, el formato moderno, y TrueType, el antiguo.

@font-face {
  font-family: "Corte Sans";
  src: local("Corte Sans"),
       url("/fuentes/corte-sans.woff2") format("woff2");
}

:root { font-size: 16px; }

.titulo-subtema {
  font-family: "Corte Sans", sans-serif;
  font-size: 1.5rem;      /* 24px: siempre sobre la raíz */
  font-style: normal;
  font-weight: 600;       /* el grosor del trazo */
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Comentarios: en CSS con barra asterisco; en HTML con <!-- --> */

• letter-spacing y word-break: separación entre letras y dónde se permite partir una palabra.
• line-height y text-indent: altura de línea y sangría de la primera línea.
• text-align y text-transform: alineación y paso a mayúsculas o minúsculas.
• text-decoration: subrayado, tachado o ninguno.
• text-overflow y hyphens: qué hacer cuando el texto no cabe y si se permite partir con guion.

Hay tres sitios donde puede vivir el CSS, y se diferencian en su alcance. La hoja externa es un fichero .css enlazado desde <head> con <link rel="stylesheet">, y es la única que sirve a varias páginas a la vez. La hoja interna va dentro de una etiqueta <style> en la cabecera del propio documento y solo afecta a esa página. Y el estilo en línea va en el atributo style de una etiqueta concreta: como ya sabe a qué elemento se aplica, ahí no se escribe selector.

<head>
  <!-- Externo: un fichero para toda la web -->
  <link rel="stylesheet" href="/css/temario.css">

  <!-- Interno: solo para esta página -->
  <style>
    .aviso-intento { color: crimson; }
  </style>
</head>
<body>
  <!-- En línea: solo para esta etiqueta, y sin selector -->
  <p style="font-weight: bold">Te queda un intento.</p>
</body>

Una pseudoclase describe un estado del elemento y se escribe con dos puntos. Un pseudoelemento describe una parte del elemento y se escribe con dos puntos dobles: esa doble notación es justamente lo que los distingue en el examen.

Las custom properties, o variables de CSS, se declaran con dos guiones delante del nombre y se leen con la función var(). Se suelen declarar en :root para que estén disponibles en todo el documento, y como son propiedades normales, se heredan y se pueden redefinir en un contenedor concreto.

:root {
  --verde-corte: #2f7d5b;
  --radio-tarjeta: 8px;
}

.tarjeta-tema {
  border: 2px solid var(--verde-corte);
  border-radius: var(--radio-tarjeta);
}

/* Media query: la maquetación de dos columnas solo a partir
   de 700 px de ancho de ventana */
@media screen and (min-width: 700px) {
  .panel-temario { display: grid; grid-template-columns: 1fr 3fr; }
}

/* Y una hoja distinta al imprimir */
@media print {
  nav, aside { display: none; }
}

Las media queries son la pieza con la que CSS3 hizo posible el diseño adaptativo. La regla @media combina un tipo de medio (screen, print, all) con una o varias características del dispositivo, como min-width o max-width, mediante los operadores and, not y only, y aplica el bloque solo cuando la condición se cumple. Con ellas, la misma hoja de estilo sirve para un móvil y para un monitor.