Eu escrevo um elemento html como abaixo:

<div class="box"> Foo box </div>

e escrever css como

.box {
    width: 400px;
    height: 40px;
    color: red;
    text-align: center;
}

or

div.box {
    width: 400px;
    height: 40px;
    color: red;
    text-align: center;
}

Eu quero perguntar como ambos os css para a classe de caixa são diferentes uns dos outros.