Cuando llamas a una variable .regla le estás dando una clase.
me explico:
Tienes una web y colocas una div cualquiera.. El html sería:
<div>Hola</div>
Le quieres dar el estilo de "Regla" a esa DIV.
<div class="regla">Hola</div>
y en CSS sería:
.regla{
blablabla;
}
-----------------------------------------------------------
Si quieres darle un estilo a una div llamada REGLA, lo puedes usar con id!
en el html sería así:
<div id="regla">Hola</div>
y en el CSS sería asi:
#regla{
blablabla;
}
-----------------------------------------------------------------
Recuerda, cuando uses "#regla" le darás el estilo a la div llamada "regla", cuando uses una clase llamada ".regla" le darás a una div el estilo que llamaste "regla".
Esto es algo complejo de entender al principio pero es sencillo completamente.