Mit Klassen und ID Selektoren können Sie die Stylesheets spezifischer Einsätzen und gleichen Elementen ein verschiedenes Aussehen geben.
Klassenselektor
Der Klassenselektor kann fast uneingeschränkt genutzt werden, dafür müssen Sie dem HTML Element mit dem Attribut class einen Wert geben. Dieser Selektor kann und darf für wiederholende Designelemente verwendet werden.
1 | <p class="absatz">Ich bin ein Absatz</p> |
Mit CSS können Sie alle Elemente mit der Klasse absatz gestalten, dafür setzen Sie einen Punkt in die CSS Datei und dahinter den Wert von class.
1 2 3 4 | .absatz { font-size: 1em; font-weight: bold; } |
Das Problem an dem CSS Code ist, dass er alle Elemente mit Klasse absatz anspricht. Bei nur einem HTML Tag ist das egal, aber bei mehreren kann es zu Verwechslungen kommen, wenn ein anderes Element, wie < h1>, auch class=“absatz“ hat, darum kann man den Typselektor mit dem Klassenselektor verwenden.
1 2 3 4 | p.absatz { font-size: 1em; font-weight: bold; } |
Jetzt wird nur das Element <p> mit dem Attribut class und dem Wert absatz angesprochen.
ID-Selektor
Der ID-Selektor funktioniert im Prinzip wie class, mit dem feinem Unterschied, dass das angesprochene Designelement nur einmal im HTML Quelltext vorkommen darf. Statt einem Punkt wird eine Raute (#) genommen.
1 2 3 4 5 6 7 8 9 10 11 | <div id="content"> <h1>Ich bin eine Überschrift</h1> <p>Ich bin ein Absatz</p> </div> #content { width: 100%; height: 100%; background-color: #000; } #content p { /*Alle <p>'s innerhalb von #content haben die Schriftgröße 1em*/ font-size: 1em; } |
