Marc Semper Lloret
← CSS: diseño, maquetación y responsive

Sesión 1 · Semana 1

Nuestro primer CSS

Hoy · Hoja de ruta

  1. 1. Aprende: Cómo se enlaza una hoja de estilos, de qué partes se compone una regla y por qué existen tres formas de aplicar CSS aunque solo usemos una.
  2. 2. Haz: Crea tu hoja de estilos, enlázala en las cuatro páginas y da el primer estilo al sitio.
  3. 3. Comprueba: Las cuatro páginas cargan el CSS, y sabes comprobarlo sin adivinar.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿Qué información pertenece a HTML y cuál esperas que pertenezca a CSS?
  2. ¿Qué ventaja tiene conservar el mismo HTML cuando cambia el diseño?
  3. Señala qué cambiarías para presentar un título en azul sin alterar su significado.

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

Forma Cómo se escribe Cuándo
Hoja externa Un archivo .css enlazado con link Siempre, en esta unidad y en la práctica profesional
Hoja interna Un bloque style en el head Casos muy puntuales, como un correo electrónico
En línea Un atributo style en el elemento Prácticamente nunca a mano

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.

Crea el archivo:

css/styles.css

y enlázalo desde el head de cada página:

<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;
}
Vista previaLa estructura recibe una presentación propia

PixelStore

Componentes pensados para trabajar y crear.

El contenido HTML no cambia: CSS modifica tipografía, color y ritmo de lectura.

Regla

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

Los comentarios

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

CSS solo tiene esta forma de comentar. // no funciona, aunque el editor a veces lo coloree como si lo hiciera.

Tarea 1 · Tu primer estilo

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.
Objetivo mínimoUna hoja externa cargada en las cuatro páginas y tres reglas que puedas explicar.
Si lo tienesCambia el nombre o la ubicación de la hoja y diagnostica el fallo con Network.
RetoRecibe una quinta página y enlaza el CSS desde una carpeta distinta.

Si una página no cambia, no escribas más CSS

Es el error que más tiempo consume la primera semana, y la reacción instintiva es escribir más reglas por si acaso. No sirve de nada: si la hoja no carga, ninguna regla va a funcionar.

Comprueba en este orden: ¿la ruta del link es correcta desde esa página?, ¿el archivo se llama exactamente así, con sus mayúsculas?, ¿lo has guardado? Y la comprobación definitiva: abre DevTools, pestaña Network, recarga, y busca styles.css. Si aparece en rojo con un 404, ya sabes que el problema es la ruta y no el CSS.

Checkpoint · fin de la sesión 1

  • Existe css/styles.css y está enlazado en las cuatro páginas.
  • Sabes nombrar las tres partes de una regla.
  • Sabes comprobar en Network si la hoja se ha cargado.
  • No has tocado el HTML salvo para añadir el link.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Por qué usamos una hoja externa y no un atributo style?
  2. Nombra las tres partes de una regla CSS.
  3. Una página no aplica los estilos. ¿Cuál es la primera comprobación?
Ver respuestas

1 · Una definición sirve para todas las páginas, el navegador la cachea, y el estilo queda separado del contenido.

2 · Selector, propiedad y valor. La propiedad con su valor forman una declaración.

3 · Que la hoja se esté cargando: la ruta del link, el nombre exacto del archivo, y comprobarlo en la pestaña Network de DevTools.