Identidad Cauce
Marca, papelería y señalética para un centro cultural.
El lenguaje con el que un documento marcado se convierte en un diseño. Aquí entra el criterio del diseñador, y el navegador empieza a obedecerlo.
Para ubicar el tema
Cada parte del contenido tiene nombre: título, párrafo, imagen, enlace.
Ese contenido recibe color, tipografía, espacio y proporción.
La producción de sitios completos, apoyada en estas mismas bases.
Sesión 2.3
Selector, propiedad y valor, con la puntuación exacta que exige el lenguaje.
Selectores de tipo, clase e identificador, combinadores y pseudoclases.
Cascada, especificidad y herencia explican casi todo conflicto en una hoja.
Contenido, relleno, borde y margen deciden el espacio real que ocupa cada elemento.
Unidades absolutas y relativas, notaciones de color, variables y ajustes tipográficos: el vocabulario con el que se traduce una decisión de diseño a código.
Concepto
Es el lenguaje que describe cómo se presenta un documento marcado. Declara qué aspecto tiene cada cosa: su color, su tamaño, su tipografía y el espacio a su alrededor.
Tampoco es un lenguaje de programación. Se escribe como una lista de declaraciones: elemento al que apunta, propiedad que se modifica y valor que se le asigna. El navegador las lee todas y resuelve el resultado.
Una sola regla alcanza a cuántos elementos haga falta. Ahí está su economía: el estilo se escribe una vez y se aplica en todas partes.
Principio de trabajo
Contiene el contenido y su jerarquía. Cambia cuando cambia lo que se dice.
Contiene las decisiones visuales. Cambia cuando cambia el diseño.
La demostración clásica de esto es csszengarden.com: un mismo documento HTML y cientos de diseños sin parecido entre sí, cada uno con solo cambiar el archivo CSS.
Sintaxis
Selector · bloque de declaración
.piezaIndica a qué elementos se aplica todo lo que sigue. Puede señalar a uno solo, a un grupo o a miles a la vez. Es la parte que exige más criterio, y por eso ocupa buena parte de esta sesión.
{ }Abren y cierran el bloque de declaración. Dentro caben todas las declaraciones que se quieran. Una llave sin cerrar deja fuera de servicio al resto de la hoja: el navegador sigue leyendo pensando que aún está dentro del bloque.
colorEl atributo visual que se va a modificar. Su nombre está fijado por el lenguaje y se escribe en minúsculas, con guiones en lugar de espacios: font-size, background-color, border-radius.
:Separan la propiedad de su valor. Confundirlos con el signo = del HTML es un error de principiante que anula la declaración completa sin avisar.
#b45309Lo que recibe la propiedad. Cada propiedad admite su propio tipo de valor: un color, una medida, una palabra clave, una lista de fuentes. Un valor que la propiedad no reconoce se descarta en silencio.
;Cierra la declaración. Es obligatorio entre una declaración y la siguiente; en la última del bloque puede omitirse, aunque conviene escribirlo siempre para no romper la regla al agregar otra línea después.
Vinculación
styleEl CSS se escribe dentro del propio elemento. Afecta a ese elemento y a ninguno más.
Vuelve a mezclar contenido y presentación, obliga a repetir el mismo estilo en cada elemento y complica cualquier cambio posterior. Queda reservado a retoques puntuales y a los correos electrónicos en HTML, donde no hay otra opción.
<style>Un bloque de CSS dentro del <head> del documento. Alcanza a toda la página, pero solo a esa.
Útil para probar algo rápido o para una página única que no forma parte de un sitio. En un sitio de varias páginas obliga a copiar el mismo bloque en cada archivo.
<link>Un archivo .css aparte, vinculado desde el <head> de cada página del sitio.
Un solo archivo gobierna el sitio completo. El navegador lo descarga una vez y lo reutiliza en cada página, así que además carga más rápido. Es la forma que se usa en clase y en producción.
El atributo rel="stylesheet" declara la relación entre los dos archivos; sin él, el enlace no se interpreta como hoja de estilos.
Laboratorio 1
Selectores
Un selector es una descripción de los elementos a los que se quiere alcanzar dentro del documento.
El navegador recorre el árbol del documento, comprueba cuáles encajan con esa descripción y les aplica el bloque. Puede alcanzar a ninguno, a uno o a todos.
Los tres básicos
Nombra la etiqueta. Alcanza a todos los elementos de esa clase de contenido en el documento.
Para el estilo de base de un sitio: la tipografía de los títulos, el interlineado de los párrafos.
Se apoya en el atributo class. Puede repetirse en cuantos elementos haga falta, y un elemento puede llevar varias.
Es el selector de trabajo diario. Casi todo el diseño de un sitio se resuelve con clases.
Se apoya en el atributo id, que debe ser único en toda la página.
Queda mejor reservado a los enlaces internos y al código; como herramienta de estilo pesa demasiado en la cascada.
Interactivo
Marca, papelería y señalética para un centro cultural.
Serigrafía a dos tintas sobre papel de algodón.
Siete títulos de narrativa breve, en rústica.
Estudio Ocre · Toluca
Relaciones
| Escritura | Relación | Qué alcanza |
|---|---|---|
| article p | Descendiente | Todos los párrafos que estén dentro de un article, a cualquier profundidad. |
| article > p | Hijo directo | Solo los párrafos que cuelgan inmediatamente del article, sin ningún elemento intermedio. |
| h3 + p | Hermano contiguo | El párrafo que viene justo después de un h3, al mismo nivel. Sirve para la entradilla que sigue a un título. |
| h3 ~ p | Hermano posterior | Todos los párrafos que vengan después de ese h3 dentro del mismo contenedor. |
| .pieza.destacada | Sin espacio | El elemento que lleva las dos clases a la vez. El espacio cambia por completo el significado. |
| h1, h2, h3 | Agrupación | La coma une selectores independientes que comparten el mismo bloque de declaraciones. |
Estados y partes
Describen un estado o una posición. Nada de eso está escrito en el documento: lo sabe el navegador mientras la página se usa.
Alcanzan una parte del elemento que no existe como etiqueta propia.
Criterio
Frágil
El nombre describe el aspecto actual. En cuanto el rojo pase a ocre, el nombre miente y hay que tocar también el HTML.
Duradero
Aquí el nombre apunta a la función que cumple esa pieza dentro del sitio. El rojo puede volverse ocre, la barra puede pasarse a la derecha y el documento no se entera.
En proyectos grandes se adoptan convenciones más estrictas —BEM Block Element Modifier · bloque, elemento y modificador es la más difundida— que prefijan el nombre del componente en cada clase para evitar colisiones.
La cascada
Cada navegador trae su propia hoja. Es la que hace que un h1 salga grande y en negritas, y que un enlace salga azul y subrayado.
La que se escribe en el proyecto. Se aplica encima de la anterior y la reemplaza donde coincidan.
Ajustes del propio usuario: tamaño mínimo de letra, contraste alto, movimiento reducido.
La cascada
Dos reglas idénticas en fuerza y en puntería, sobre la misma propiedad. Se aplica la que aparece más abajo en la hoja.
Lo mismo ocurre entre archivos: si se vinculan dos hojas, la del segundo <link> pisa a la del primero.
La cascada
Cuando dos reglas discrepan, el navegador compara primero cuán preciso es cada selector. A esa medida se le llama especificidad y se cuenta en tres cifras.
| Cifra | Qué cuenta | Ejemplos | Peso |
|---|---|---|---|
| A | Identificadores | #trabajo | El más alto. Una sola cifra A vence a cualquier cantidad de B. |
| B | Clases, atributos y pseudoclases | .pieza · [href] · :hover | El terreno normal de trabajo. |
| C | Etiquetas y pseudoelementos | article · ::before | El más bajo. Solo decide si A y B empatan. |
Interactivo
Regla escrita antes
Regla escrita después
Propagación
Algunas propiedades pasan de un elemento a sus descendientes sin necesidad de repetirlas. Casi todas las que tienen que ver con el texto.
De ahí la costumbre de fijar la tipografía de base en body: se escribe una vez y desciende hasta el último párrafo.
Se hereda
color
font-family
font-size
font-weight
line-height
letter-spacing
text-align
visibility
No se hereda
margin
padding
border
background
width
height
display
position
Resolución
01 ¿Alguna declaración lleva !important? Esa gana, sin más comprobaciones.
02 ¿Hay estilo en línea, escrito en el atributo style? Pesa más que cualquier hoja.
03 Se comparan las especificidades: identificadores, luego clases, luego etiquetas.
04 Si todo empata, se aplica la declaración que aparece más abajo.
05 Si ninguna regla habla de esa propiedad, se hereda del padre o se toma el valor inicial.
Su uso legítimo es puntual: forzar un estilo sobre una biblioteca externa que no se puede editar, o sobre el marcado que genera un gestor de contenidos.
Espacio
El navegador dibuja cada elemento como una caja rectangular formada por cuatro capas concéntricas.
El texto o la imagen. Su tamaño lo fijan width y height, o lo decide el propio contenido.
Aire interior, entre el contenido y el borde. Toma el color de fondo del elemento.
La línea perimetral. Tiene grosor, estilo y color, y ocupa espacio real.
Aire exterior, que separa esta caja de sus vecinas. Siempre transparente.
Interactivo
Comportamiento
| Valor | Comportamiento |
|---|---|
| block | Ocupa todo el ancho disponible y provoca salto de línea. Acepta width, height y márgenes en los cuatro lados. Es lo que traen div, p, section o h1. |
| inline | Ocupa solo lo que mide su contenido y convive con el texto en la misma línea. Ignora el alto y los márgenes verticales. Es lo que traen a, span, strong o em. |
| inline-block | Se comporta como una palabra dentro de la línea, pero sí acepta ancho, alto y márgenes. Útil para botones y para elementos de un menú horizontal. |
| none | Retira el elemento del documento visible. No deja hueco, y los lectores de pantalla tampoco lo anuncian. |
Valores
| Unidad | Con qué se mide |
|---|---|
| px | Píxeles. Medida fija, la más predecible y la menos adaptable. |
| % | Porcentaje del elemento contenedor. |
| em | Relativa al tamaño de letra del propio elemento. Se acumula al anidar. |
| rem | Relativa al tamaño de letra de la raíz del documento. No se acumula. |
| vw · vh | Porcentaje del ancho o del alto de la ventana. |
| ch | Ancho del carácter cero. Con ella se acota la medida de línea de un texto. |
Valores
La notación hsl es la más manejable para un diseñador: fijando el tono y moviendo solo la luminosidad se obtiene una escala coherente de un mismo color. Añadir un cuarto valor introduce transparencia: hsl(29 91% 37% / .4).
La paleta queda declarada en un solo lugar. Cambiar ahí el valor repinta el sitio entero, y es lo que hace posible el modo claro y oscuro de esta misma presentación.
Valores
La lista se llama pila de fuentes. El navegador prueba una por una hasta encontrar la primera disponible en el equipo; la última es siempre una familia genérica, como red de seguridad.
| Propiedad | Qué controla |
|---|---|
| font-size | El cuerpo. En rem para que respete la preferencia del usuario. |
| font-weight | El grosor, de 100 a 900. La palabra bold equivale a 700. |
| line-height | La interlínea. Sin unidad —1.6— se calcula sobre el cuerpo de cada elemento. |
| letter-spacing | El interletraje. En títulos grandes suele pedir un valor negativo. |
| text-transform | Mayúsculas o versalitas, sin alterar el texto del documento. |
| max-width | Acota la medida de línea. Entre 60 y 75 caracteres se lee sin fatiga. |
Referencia
Práctica
Neutraliza los valores que trae la hoja del navegador para que el diseño no herede márgenes ni rellenos imprevistos.
border-box aplicado a todo hace que width signifique el ancho real de la caja. La regla sobre img impide que una imagen grande desborde su contenedor.
La paleta y la unidad de espaciado quedan declaradas en un solo sitio. Cambiar --ocre repinta el sitio entero.
Declararlas en :root las deja disponibles en cualquier regla de la hoja, porque :root es el elemento html y todo desciende de él.
Las propiedades de texto puestas en body descienden a todo el documento. Es la aplicación práctica de la herencia: se escribe una vez.
La regla p + p usa el combinador de hermano contiguo para separar párrafos consecutivos sin dejar margen suelto antes del primero.
La unidad ch mide el ancho del carácter cero, así que 68ch acota el texto a unos setenta caracteres por línea, que es el intervalo cómodo de lectura.
margin: 0 auto reparte el espacio sobrante a partes iguales y centra el bloque.
El color del enlace sale de la variable, así que participa del mismo sistema que el resto del diseño.
:focus-visible dibuja el contorno solo cuando el elemento se alcanzó con el teclado. Retirarlo sin sustituto deja sin referencia a quien navega sin ratón.
Laboratorio 2
Variables de color, tipografía heredada desde body, modelo de caja y pseudoclases, trabajando sobre el mismo documento.
Diagnóstico
Escribir pieza en lugar de .pieza hace que el navegador busque una etiqueta con ese nombre. No encuentra ninguna y descarta la regla.
Todo lo que viene después queda absorbido dentro del bloque anterior. Suele delatarse porque deja de funcionar la mitad inferior de la hoja.
Si la hoja no carga, la página se ve con el estilo del navegador. Conviene comprobar la ruta y las mayúsculas del nombre del archivo.
width: 300 no significa nada. Solo 0 y las cifras sin unidad de line-height pueden ir sin ella.
La declaración se escribió, pero pierde contra un selector de mayor puntería o contra una regla situada más abajo.
La hoja anterior sigue en la memoria intermedia del navegador. Se resuelve recargando con la memoria vaciada.
Nombres como .título principal se interpretan como dos selectores distintos. Las clases van sin acentos, sin eñes y sin espacios.
Herramienta
Las herramientas de desarrollo muestran, para cualquier elemento de la página, todas las reglas que lo afectan y cuáles quedaron descartadas.
Se abren con F12 en Windows. El panel de estilos permite además modificar valores en caliente y ver el resultado al instante, sin tocar el archivo.
El árbol del documento tal como quedó, con el elemento señalado resaltado en la página.
Las reglas aplicadas, en orden de peso, con las descartadas tachadas.
El valor final de cada propiedad y el diagrama de la caja con sus medidas reales.
La página vista con las medidas de un teléfono o una tableta.
Evaluación
Partir de la página de presentación personal entregada en la sesión anterior y escribir su hoja de estilos. Entregar el archivo .html, el archivo .css y una captura del resultado.
01 Vincular una hoja externa con <link>. Sin estilos en línea ni bloques <style>.
02 Declarar la paleta y la tipografía como variables en :root, con un mínimo de cuatro.
03 Usar los tres tipos de selector básicos y al menos un combinador y una pseudoclase.
04 Nombrar cada clase por la función que cumple dentro de la página.
05 Aplicar el modelo de caja: relleno, borde y margen deliberados, y la medida de línea acotada.
06 Resolver el estado :hover y el :focus-visible de los enlaces.
07 Entregar la hoja comentada y sin ningún !important.
| Criterio | Peso |
|---|---|
| Selectores adecuados y bien nombrados | 30 % |
| Modelo de caja y espaciado | 25 % |
| Sistema de color y tipografía coherente | 25 % |
| Hoja externa, ordenada y comentada | 20 % |
¿Qué separa a la propiedad de su valor? · ¿Por qué conviene una hoja externa? · ¿Qué gana entre #menu a y nav .enlace? · ¿Qué propiedades se heredan? · ¿Qué cambia border-box en el ancho final? · ¿Cuándo se usa rem y cuándo px?
Referencia
La referencia de cada propiedad, con su sintaxis, sus valores admitidos y ejemplos ejecutables. Disponible en español.
developer.mozilla.org
Tutoriales breves y un editor en línea para probar cada propiedad sin instalar nada.
w3schools.com
Generadores de sombras, degradados y bordes redondeados, con el código listo para copiar.
cssportal.com
Revisa la hoja completa y señala línea por línea los errores de sintaxis y las propiedades desconocidas.
jigsaw.w3.org/css-validator
Documentación consultada en 2025. Las especificaciones del lenguaje las publica el W3C World Wide Web Consortium · Consorcio de la Red Informática Mundial por módulos independientes.
Fin del subtema 2.3
Color, tipografía y espacio ya responden. Lo que todavía se resiste es la retícula: dónde se coloca cada bloque y cómo se reacomoda todo en una pantalla pequeña.
Esta presentación está pensada para pantalla horizontal.
CSS: selectores, cascada y modelo de caja