3.1 Formatierung mit CSS
Bei der Formatierung mit CSS muss zunächst ausgewählt werden, was formatiert werden soll. Dies geschieht mit Hilfe eines Selektors. Wird als Selektor ein Elementname angegeben (Element- bzw. Typselektor) werden alle Elemente mit diesem Namen ausgewählt. Anschließend wird festgelegt, wie diese formatiert werden sollen. Dazu werden den entsprechenden CSS-Eigenschaften die gewünschten Eigenschaftswerte zugewiesen.
Beispiel: Formatierung des body-Elements
Das body-Element soll wie folgt formatiert werden:
-
Hintergundfarbe hellgrün (Farbwert
#DDF9CC) -
Schriftart
Arial. Sollte diese Schriftart auf dem anzeigendem Rechner nicht verfügbar sein, soll eine andere serifenlose (sans-serif) Schriftart verwendet werden.
background-color: #DDF9CC;
font-family: Arial, sans-serif;
}
body-Elements
Diese Formatierungen gelten auch für alle Elemente innerhalb des body-Elements (Kindelemente). Soll dies für ein Element nicht gelten, muss für dieses eine eigene CSS-Regel erstellt werden, in der der jeweiligen Eigenschaft ein abweichender Wert zugewiesen wird.
Eine CSS-Regel besteht aus einem Selektor, auf den eine öffnende und eine schließende geschweifte Klammer folgt. Der Selektor legt fest, welche Elemente mit dieser Regel formatiert werden. Innerhalb der Klammern können dann CSS-Eigenschaften neue Werte zugewiesen werden. Dies erfolgt jeweils durch Angabe der Eigenschaft, gefolgt von einem Doppelpunkt, dem neuen Eigenschaftswert und einem Strichpunkt.
Elternelemente vererben die Werte ihrer CSS-Eigenschaften an ihre Kindelemente.
CSS-Eigenschaft: Wert;
...
}