Cómo aplicar dos clases CSS a un solo elemento

¿Puedo aplicar 2 clases a un solo div o span o cualquier elemento html? Por ejemplo:

<a class="c1" class="c2">aa</a>

Lo intenté y en mi caso c2 no se aplica. ¿Cómo puedo aplicar ambas clases a la vez?

1) Utilice varias clases dentro del atributo de clase, separadas por espacios en blanco ( ref ):

<a class="c1 c2">aa</a>

2) Para apuntar a elementos que contienen todas las clases especificadas, use este selector CSS ( sin espacio ) ( ref ):

.c1.c2 {
}

Incluya ambas cadenas de clase en un solo valor de atributo de clase, con un espacio entre ellas.

<a class="c1 c2" > aa </a>

Como han señalado otros, simplemente delimita con un espacio.

Sin embargo, también es útil saber cómo funcionan los selectores.

Considere esta pieza de HTML ...

<div class="a"></div>
<div class="b"></div>
<div class="a b"></div>

El uso .a { ... }como selector seleccionará el primero y el tercero. Sin embargo, si desea seleccionar uno que tenga ambos ay b, puede usar el selector .a.b { ... }. Tenga en cuenta que esto no funcionará en IE6, simplemente seleccionará .b(el último).

<a class="c1 c2">aa</a>

Esto es muy claro que para agregar dos clases en un solo div, primero tienes que generar las clases y luego combinarlas. Este proceso se utiliza para realizar cambios y reducir el no. de clases. Los que hacen el sitio web desde cero utilizan principalmente este tipo de métodos. hacen dos clases, la primera clase es para el color y la segunda clase es para establecer el ancho, alto, estilo de fuente, etc. Cuando combinamos ambas clases, la primera clase y la segunda clase están en efecto.

.color
{background-color:#21B286;}
.box
{
  width:"100%";
  height:"100px";
  font-size: 16px;
  text-align:center;
  line-height:1.19em;
}
.box.color
{
width:"100%";
height:"100px";
font-size:16px;
color:#000000;
text-align:center;
}

<div class="box color">orderlist</div>

Sepárelos con un espacio.

<div class="c1 c2"></div>