Por clase

<< Por identificador Prioridad de selectores >>

Cuando tenemos propiedades CSS que se repiten y no podemos asignarle a varias etiquetas distintas el mismo identificador utilizamos las clases de CSS. Toda etiqueta HTML puede tener el atributo class, la diferencia con respecto a los ids es que estos no tienen porqué ser únicas y por tanto, podemos encontrarnos varias clases iguales en un mismo documento HTML.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">          
</head>
<body>
     <form action="#" method="post">
          <button class="btn-page">Atrás</button>
          <button class="btn-page">Siguiente</button>
          <button class="btn-cancel">Cancelar</button>
     </form>
</body>
</html>

En el ejemplo anterior tenemos 3 botones, los dos primeros son botones para navegar en una página, y para establecer el mismo estilo le hemos puesto una clase llamada btn-page. Por otro lado, tenemos el botón Cancelar que le hemos puesto un estilo diferente (clase btn-cancel). Al usar class nos ha permitido con un sólo selector utilizar un mismo estilo en dos botones y podremos reutilizarlos si queremos aplicar ese estilo en más elementos de nuestro HTML. 

En CSS si queremos acceder a una determinada clase, se accede mediante el carácter punto(.): Ejemplo: .btn-page, de esa forma estamos accediendo a todos los elementos de nuestro HTML que tengan el atributo: class="btn-page"

Además, en las clases podemos indicar en nuestro CSS qué tipo de elemento se trata, pudiendo utilizar ese mismo nombre de la clase en otros elementos HTML y darle un estilo diferente. Por ejemplo:

button{
    border-radius: 5px;
    background-color: azure;
}
button.btn-page {
    /* Asignamos estilo sólo a los elementos button que tengan la clase btn-page */
    background-color: gray;
    color: white;
}
p.btn-page {
    /* Asignamos estilo sólo a los elementos p que tengan la clase btn-page */
    background-color: chocolate;
    color: white;
}

<< Por identificador Prioridad de selectores >>