Ya sabes cómo se escribe una regla, los selectores, el color, la tipografía y el modelo de caja. Con eso se puede dar estilo a una página, pero al hacer tu primera ficha o tu portfolio aparecen dudas muy concretas: ¿por qué hay un hueco blanco alrededor de la página?, ¿cómo quito los puntos de una lista?, ¿cómo pongo un menú en horizontal?, ¿cómo oculto un título sin que desaparezca para un lector de pantalla? Esta página las resuelve una a una, con el código que vas a necesitar.

Una página sin CSS ya tiene estilos: los pone el navegador. Los más visibles:

Por eso casi todas las hojas de estilos empiezan así:

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;            /* fuera el marco blanco de 8 px */
}

💡 Consejo. Si ves un espacio que no has puesto tú, inspecciona el elemento. En la pestaña Estilos de las DevTools, las reglas del navegador aparecen al final con la etiqueta «hoja de estilos del agente de usuario» (user agent stylesheet).

Varios selectores para una regla

Si dos o más selectores comparten estilo, sepáralos con comas. Es lo mismo que escribir la regla varias veces:

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.2;
}

a:hover, a:focus-visible {
  color: #1e3a5f;
}

Descendientes con clase

El selector descendiente (nav a) también funciona con clases. Así das estilo a los elementos de una zona sin poner una clase a cada uno:

.menu a    { font-weight: 600; }      /* los enlaces dentro de .menu */
.trabajo h3 { font-size: 1.4rem; }    /* los h3 dentro de cada .trabajo */

El selector universal y :not()

• * elige todos los elementos. Se usa casi solo para box-sizing, como arriba (*::before y *::after son las partes que CSS puede añadir antes y después del contenido).
• :not(...) elige los que no cumplen algo:

/* todos los productos menos el destacado */
.producto:not(.destacado) {
  background-color: white;
}

margin y padding aceptan de uno a cuatro valores. Se leen en el sentido de las agujas del reloj empezando por arriba:

.caja { padding: 1rem; }                  /* los cuatro lados */
.caja { padding: 1rem 2rem; }             /* arriba y abajo 1rem · izquierda y derecha 2rem */
.caja { padding: 1rem 2rem 3rem; }        /* arriba 1rem · lados 2rem · abajo 3rem */
.caja { padding: 1rem 2rem 3rem 4rem; }   /* arriba · derecha · abajo · izquierda */

Y si solo quieres tocar un lado, cada uno tiene su propiedad: margin-top, margin-right, margin-bottom, margin-left (y lo mismo con padding-).

h2 { margin: 0 0 1rem; }       /* sin margen arriba, 1rem abajo */
li { margin-bottom: 0.5rem; }  /* aire entre los elementos de una lista */

Centrar un bloque

Un bloque se centra en horizontal con un ancho máximo y márgenes laterales auto. El navegador reparte el espacio sobrante a partes iguales:

main {
  max-width: 46rem;   /* líneas de unos 70 caracteres: se leen bien */
  margin: 0 auto;     /* 0 arriba y abajo, auto a los lados */
  padding: 0 1.5rem;  /* en el móvil, el texto no toca el borde de la pantalla */
}

text-align: center centra el texto dentro de su caja; margin: 0 auto centra la caja. Son cosas distintas y a menudo se confunden.

border junta tres valores: grosor, estilo (solid, dashed, dotted) y color. Cada lado tiene su propiedad, muy útil para filetes y separadores:

.tarjeta  { border: 1px solid #e4d9c8; }               /* los cuatro lados */
header    { border-top: 0.75rem solid #1a5d96; }       /* una franja arriba */
section   { border-bottom: 1px solid #c9c3b6; }        /* línea entre secciones */
.destacado {
  border-left: 0.3rem solid #2b7a4b;                    /* filete a la izquierda */
  padding-left: 1.25rem;                                /* separa el texto del filete */
}

border-radius redondea las esquinas. Con 50% en una caja cuadrada sale un círculo, el recurso típico para una foto de perfil:

.tarjeta { border-radius: 0.5rem; }
.avatar  { width: 8rem; height: 8rem; border-radius: 50%; }

background-color pone un color de fondo. background es el atajo que admite color, imagen y más cosas; con un solo color, las dos dan el mismo resultado:

.titulo   { text-align: center; }          /* left, right, center, justify */
.nota     { font-style: italic; }          /* normal o italic */
address   { font-style: normal; }          /* address viene en cursiva */
.oficio   { font-weight: 600; }            /* 400 normal · 700 negrita · 300 fina… */

Los pesos intermedios (300, 600…) solo se ven si la tipografía los tiene; si no, el navegador usa el más cercano.

El subrayado de los enlaces se controla con text-decoration y se puede afinar:

a {
  color: #b5400b;
  text-underline-offset: 0.2em;         /* separa el subrayado del texto */
}
a:hover, a:focus-visible {
  text-decoration-thickness: 0.15em;    /* subrayado más grueso al pasar */
}
.menu a { text-decoration: none; }      /* sin subrayado */

⚠️ Atención. Si quitas el subrayado a los enlaces que van dentro de un texto, el lector solo los distingue por el color, y no todo el mundo ve bien los colores. En un menú, que se reconoce por su posición, se puede quitar; en un párrafo, mejor dejarlo.

Para una sombra en el texto: text-shadow: desplazamiento-x desplazamiento-y desenfoque color.

h1 { text-shadow: 2px 2px 4px rgb(0 0 0 / 0.3); }

Cada elemento tiene un tipo de caja que decide si empieza en una línea nueva o se pone al lado del anterior:

display se puede cambiar. Lo vas a usar sobre todo en dos casos:

/* 1. Las imágenes y vídeos, como bloque: así no queda un hueco debajo */
img, video { display: block; }

/* 2. Los elementos de un menú, uno al lado del otro */
.menu li { display: inline-block; }

Más adelante llegarán display: flex y display: grid, que son los que se usan para maquetar en filas y columnas.

El menú de un portfolio es una lista de enlaces dentro de un nav. Con tres reglas pasa de lista con viñetas a barra horizontal:

<nav aria-label="Principal">
  <ul class="menu">
    <li><a href="#sobre-mi">Sobre mí</a></li>
    <li><a href="#trabajos">Trabajos</a></li>
    <li><a href="#contacto">Contacto</a></li>
  </ul>
</nav>

.menu {
  list-style: none;          /* fuera las viñetas */
  margin: 0;
  padding: 0;                /* fuera la sangría de la lista */
}
.menu li {
  display: inline-block;     /* uno al lado del otro */
  margin-right: 1.25rem;     /* separación entre enlaces */
}
.menu a {
  font-weight: 600;
  text-decoration: none;
}
.menu a:hover,
.menu a:focus-visible {
  text-decoration: underline;   /* al pasar o con el teclado vuelve el subrayado */
}

Una imagen se muestra a su tamaño real: una foto de 3000 px se sale de la pantalla del móvil. Esta regla lo evita en todo el sitio:

img, video {
  display: block;
  max-width: 100%;   /* nunca más ancha que su contenedor */
  height: auto;      /* el alto se ajusta para mantener la proporción */
}

Con width fijas el ancho exacto; con max-width, el máximo, y la caja puede ser más estrecha si no cabe. Lo mismo con el alto: height lo fija y min-height pone un mínimo y deja crecer la caja si el contenido lo necesita.

.trabajo img { width: 100%; max-width: 24rem; }   /* llena la tarjeta hasta 24rem */
.portada     { min-height: 100vh; }                /* al menos el alto de la pantalla */

Hay varias formas de ocultar algo y no hacen lo mismo. La pregunta clave es: ¿quién tiene que dejar de verlo?, ¿todo el mundo o solo quien mira la pantalla?

.aviso-cerrado { display: none; }        /* desaparece del todo */
.hueco         { visibility: hidden; }   /* invisible, pero su sitio sigue ahí */

<p hidden>Este párrafo no se muestra.</p>

Ocultar solo a la vista: un h1 para la estructura

A veces un texto sobra en pantalla pero hace falta en el código. El caso típico es el del portfolio: la cabecera ya muestra tu nombre en grande con un diseño propio, pero la página necesita un h1 que diga de qué trata, porque los lectores de pantalla y los buscadores lo usan para entender la página (un único h1 por página).

Si le pones display: none, el h1 deja de existir también para el lector de pantalla y se pierde lo que querías conseguir. La solución es una clase que lo hace diminuto y lo recorta, sin quitarlo:

<h1 class="solo-lector">Portfolio de Lucía Prieto</h1>
<header class="cabecera">
  <p class="nombre">Lucía Prieto</p>
  <p class="oficio">Diseño gráfico e ilustración</p>
</header>

/* Oculto a la vista, presente para lectores de pantalla y buscadores */
.solo-lector {
  position: absolute;       /* sale del flujo: no empuja a nada ni deja hueco */
  width: 1px;
  height: 1px;              /* un punto de 1 × 1 px */
  overflow: hidden;         /* lo que no cabe en ese punto no se pinta */
  clip-path: inset(50%);    /* y el punto se recorta hasta desaparecer */
  white-space: nowrap;      /* el texto no se parte en líneas (evita lecturas raras) */
}

No hace falta que entiendas aún cada propiedad a fondo : copia la clase tal cual en tu hoja de estilos y úsala cuando la necesites. Otros usos:

• El texto de un botón que solo muestra un icono: <button>🔍<span class="solo-lector">Buscar</span></button>.
• Un h2 para una sección que visualmente no lleva título, como la lista de trabajos.

⚠️ Atención. Úsala para dar contexto, no para esconder texto con el que engañar a los buscadores: lo que está en el h1 oculto tiene que ser lo mismo que la página muestra.

En muchos proyectos y en Bootstrap esta clase se llama visually-hidden o sr-only (screen reader only); hace lo mismo.

<h1 class="solo-lector">Portfolio de Lucía Prieto</h1>
<header class="cabecera">
  <p class="nombre">Lucía Prieto</p>
  <p class="oficio">Diseño gráfico e ilustración</p>
  <nav aria-label="Principal">
    <ul class="menu">
      <li><a href="#sobre-mi">Sobre mí</a></li>
      <li><a href="#trabajos">Trabajos</a></li>
      <li><a href="#contacto">Contacto</a></li>
    </ul>
  </nav>
</header>

:root {
  --papel: #faf6ef;
  --marino: #1e3a5f;   /* 10,7:1 sobre el papel */
  --teja: #b5400b;     /* 5,3:1 sobre el papel */
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--papel);
  color: var(--marino);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
}

.cabecera {
  max-width: 62rem;
  margin: 0 auto;                         /* centrada */
  padding: 3rem 1.5rem 1rem;
  border-bottom: 2px solid var(--marino); /* línea bajo la cabecera */
}
.nombre {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3rem;
}
.oficio {
  margin: 0.25rem 0 1.5rem;
  color: var(--teja);
  font-weight: 600;
}

.menu { list-style: none; margin: 0; padding: 0; }
.menu li { display: inline-block; margin-right: 1.25rem; }
.menu a { color: var(--teja); font-weight: 600; text-decoration: none; }
.menu a:hover, .menu a:focus-visible { text-decoration: underline; }

.solo-lector {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

Resultado: una cabecera centrada con el nombre en grande y con remates, el oficio en color teja, el menú en una fila y una línea debajo. El h1 no se ve, pero un lector de pantalla empieza la página diciendo «Portfolio de Lucía Prieto, encabezado de nivel 1».

• Poner width o margin-top a un a o un span y que no pase nada: son inline. Cámbialos a inline-block o block.
• Intentar centrar una caja con text-align: center: centra lo de dentro, no la caja. Para la caja, max-width + margin: 0 auto.
• Quitar las viñetas con list-style: none y que la lista siga con sangría: falta padding: 0.
• Ocultar el h1 con display: none: desaparece también para el lector de pantalla.
• Olvidar max-width: 100% en las imágenes y que el móvil tenga scroll horizontal.