Por clase
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;
}