In den ersten beiden Lektionen habt ihr die Divbenennung Id kennengelernt, womit ihr einer ID einen eindeutigen Namen gebt. Was macht ihr aber jetzt wenn ihr eine Div mit genau den gleichen Eigenschaften haben möchtet? Einfach alle Div-Attribute im Stylesheet kopieren und unter einem neuen Div Namen einfügen? Warum so kompliziert? Nutzt doch einfach das Element “class” anstatt dem Element ID. Der Unterschied zwischen ID und Class ist, dass ihr Classen mehrmals innerhalb eines Html-Dokumentes aufführen könnt, ohne dass dieses die validität eurer Seite stört. Das beste an der ganzen Geschichte ist, dass ihr euch nicht unbedingt entscheiden müsst zwischen Klassen und Id´s, sondern beide gleichzeitig in einem Element verwenden könnt, dazu aber später. Durch diesen entscheidenen Vorteil könnt ihr euren Id´s zusätzlich die Werte einer Klasse übergeben wie Schriftfarbe und den üblichen Css-Klammotten.

Wenn ihr eine Klasse in eurem Stylesheet erstellen möchtet, dann nehmt einfach statt dem “# ” ein “. ” So sollte dann in etwa euer Stylesheet aussehen:

.bluebig
{
font:18px Arial;
color: blue;
}

Wie ihr seht eigentlich nicht schwer, jetzt zeige ich euch noch wie man das ganze in unser bestehendes Html-Dokument einbindet.

<div id="banner">
<div id="bannert">
            BANNER</div>
</div>
<div id="navi">
<div id="navit">
          Navigation</div>
</div>
<div id="content">
<div id="contentt">
<div class="bluebig">
              text</div>
</div>
</div>

Jetzt wird es in manchen Bereichen so langsam unüberstichtlich, weshalb ich jetzt an dieser stelle die seperater Erstellung eines Divs für den blauen Text vermeiden will und euch nun zeige wie man Klassen mit Ids kombiniert

Jetzt wird es in manchen Bereichen so langsam unüberstichtlich, weshalb ich jetzt an dieser stelle die seperater Erstellung eines Divs für den blauen Text vermeiden will und euch nun zeige wie man Klassen mit Ids kombiniert:

<div id="content">
<div id="contentt" class="bluebig">
          TEST-TEXT</div>
</div>

Das Ergebnis ist das gleiche, nur Ihr habe a)weniger Zeilen benutzt und b)es für euch selbst wesentlich übersichtlicher gemacht.

Glückwunsch ihr habe eure erste Klasse sinnvoll verwendet

Id´s und Klassen, sind in CSS nicht nur für Div-container zu gebrauchen, ihr könnt im Prinzip nahezu alles mit einer Klasse versehen, was natürlich eingige Vorteile für euer Projekt bringen kann, so müsst ihr für einzelne Bilder die Ihre im Prinzip gleich gestallten wollt nicht unbedingt extra dafür gedachte Div-Container erstellen, sondern könnt diese Bilder mittels einer Klasse direkt ansteuern.

Im Prinzip macht ihr hierbei nichts anders als bei den Div-Containern, so fügt ihr bei einem Bild einfach nach Abschluss des “src” Elementes noch ein “class” oder “Id” Element hinzu und schön könnt ihr die Bilder direkt ansteuern. Dieser Vorgang funktioniert im übrigen auch mit den Überschriften H1 – H6, wodruch ihr auf ebenfalls nutzlose Div-Container aus eurem Quellcode entfernen könnt, was euch einiges an Quellcode in der HTML Datei ersparrt und dazu nur wenig Platz in eurem Stylesheet erfordert.

Ihr solltet euch also stets bei einem Projekt überlegen, ob ihr Formatierungen für Bilder zum Beispiel, auf einer Homepage mehrfach verwenden möchtet, so zum Beispiel in einer Bildergalerie.