Selectores básicos

Selector de etiqueta

El más simple: nombrás una etiqueta HTML, y la regla se aplica a todas las que haya en la página.

p {
    color: darkslategray;
}

Esto pone en gris oscuro el texto de todos los párrafos, sin excepción. Útil para estilos generales, pero no sirve si querés que un párrafo se vea distinto a los demás.

Selector de clase

Una clase es una etiqueta que vos le ponés a un elemento en el HTML, con el atributo class. Después, en CSS, seleccionás esa clase con un punto adelante.

<p class="destacado">Este párrafo es especial</p>
<p>Este es un párrafo normal</p>

.destacado {
    font-weight: bold;
    background-color: yellow;
}

Solo el párrafo con class="destacado" recibe ese estilo — el otro queda igual. Y la misma clase se puede reusar en tantos elementos como quieras, sin importar la etiqueta que sean.

Selector de id

Un id identifica a un único elemento en toda la página — a diferencia de una clase, no debería repetirse. Se selecciona con # adelante.

<header id="encabezado-principal">...</header>

#encabezado-principal {
    background-color: navy;
}