Mit Class können verschiedene Elemente einer Gruppe/Klasse zugeordnet werden, für die dann bestimmte Formatierungen gelten.
Du kannst z.B. ein Mal in der CSS-Datei festgelegen, wie hervorgehobener Text dargestellt werden soll, damit sich dieser vom Rest abhebt, z.B. durch einen gelben Hintergrund, wie ein Textmarker.
.textmarkergelb{ background-color: yellow; }
Vor dem Namen der Klasse steht ein Punkt, um anzuzeigen, dass es sich um eine Klasse handelt. Das bedeutet, dass es auf einer Seite mehrere Dinge geben kann, die zu .textmarkergelb gehören.
Will ich nun in meiner HTML-Datei hervorgehobenen Text darstellen, schreibe ich z.B.
Klassen-Definitionen beginnen immer mit einem Punkt, IDs mit Raute #. IDs sind das Gleiche wie Klassen mit dem einzigen Unterschied, dass es von einer ID auf einer Seite nur ein Element geben darf.
Weitere mögliche Anwendungen in einem Dokument könnten sein, dass du z.B. einmalig festlegst, wie Zitate innerhalb der Seite dargestellt werden, oder Definitionen, Hinweise, die besonders hervorgehoben werden sollen
In der CSS-Datei würde dann z.B. stehen:
.hinweis { font-weight: bold; font-style: italic; font-variant: small-caps; background-color: red; }
In der HTML-Datei steht dann nur <span class="hinweis">Hier steht der Hinweis ...</span>
Dafür solltest du unbedingt die Idee eines <div> verstanden haben.
Dann können wir die Seite in verschiedene Bereiche aufteilen, wie dies z.B. beim sogenannten Portallayout üblich ist.