Ich schreibe ein HTML-Element wie folgt:

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

und schreibe css wie

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

or

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

Ich möchte fragen, wie sich die beiden CSS für die Box-Klasse voneinander unterscheiden.