Wenn man mittels CSS alle Tags gleicher Art stylen will, kann man dies im HTML-Header tun.
Hierfür wird der Tag-Name angegeben, gefolgt von den CSS-Angaben in geschweiften Klammern {...}.
Es ist wichtig jede Eigenschaft mit einem Strichpunkt ; abzuschließen.
Beispiel:
Mit dieser Style-Angabe werden alle Überschriften h1 fett, zentriert und unterstrichen dargestellt:
Manchmal will man nicht alle Tags gleicher Art gleich stylen.
Hierfür kann man Klassen im Style-Teil anlegen und dieser über die class-Eigenschaft im Tag angeben.
Eine Css class startet in der Definition mit einem Punkt um sie von Tag-Namen zu unterscheiden.
In der Class-Eigenschaft des Tags lässt man diesen Punkt weg.
Beispiel:
Mit folgender Style-Definition im HEAD ...
<style>
p{/* eine Tag Definition*/
font-weight: bold;
}
.farbig{ /* eine Klasse*/
color: darkred;
background-color: yellow;
}
</style>
... und diesem HTML
<div> <p>
Hallo ich bin ein Absatz. </p> <pclass="farbig">
Ich bin ein Absatz mit<br>der Klasse <i>farbig</i>. </p> </div>
Hallo ich bin ein Absatz.
Ich bin ein Absatz mit der Klasse farbig.
Class-Selektoren kombinieren
Man kann im class-Attribute mehrere Klassen angeben. Die Klassen werden mit Leerzeichen getrennt.
Das folgende Beispeiel zeigt wie es geht.
Beispiel:
<style>
.farbig {
color: darkred;
background-color: yellow;
}
.zentriert{
text-align: center;
}
.kursiv{
font-style: italic;
} </style>
<pclass="farbig">bunter<br>Absatz</p> <pclass="farbig zentriert kursiv">bunter<br>zentrierter<br>kursiver<br>Absatz</p> <pclass="kursiv zentriert">Die Klassen werden mit
Leerzeichen getrennt!</p>
bunter Absatz
bunter zentrierter kursiver Absatz
Die Klassen werden mit Leerzeichen getrennt!
Selektoren für IDs
Man kann jedem HTML-Element mit dem ID-Attribute eine eindeutige ID zuweisen.
Um einer ID einen Style zuzuweisen verwendet man einen ID-Selektor.
Ein ID-Selektor beginnt mit # gefolgt von der ID-Bezeichnung.
Bsp: #header.