Die formale Sprache CSS
Bei den Farb- und Größenexperimenten hast du die formale Sprache CSS kennen gelernt.
Die Syntax und Semantik dieser Sprache lernst du hier kennen.
Aufgabe
Der body beschreibt das Design des gesamten Dokuments, möchte man aber das Design für ein bestimmtes HTML-Element anpassen,
dann schreibt man den Namen dieses Elements, z.B. h1 über die geschweiften Klammern.
💭 Erkunde CSS-Regeln, indem du den CSS Quelltext folgendermaßen veränderst oder ergänzt:
(a) Die CSS-Regel für h1 ist gegeben: Ändere die Farbe der h1 Überschrift in rot.
(b) Ändere die Farben der beiden anderen Überschriften, indem du weitere CSS-Regeln ergänzt.
(c) Verändere die Schriftgröße der Aufzählung (verwende dazu den Wert large oder x-large).
(d) Nimm weitere Änderungen vor.
Syntax - Die Regeln der Sprache
Eine CSS-Regel beginnt mit einem Selektor, das sind die Namen der HTML-Elemente ohne spitze Klammern, z.B. h1.
Auf den Selektor folgen geschweifte Klammern, die die Eigenschaften der Darstellung enthalten. Jeder Eigenschaft, z.B. color wird ein Wert, z.B. green zugewiesen.
Jede Zuweisung endet mit einem Strichpunkt, das sieht dann so aus:
h2
{
color: green;
}
Semantik - Die Bedeutung der Selektoren
Jeder Selektor hat eine ganz bestimmte Bedeutung.
Um die Darstellung einer Überschrift zu verändern, benutzt man zum Beispiel den Selektor h1, für eine Aufzählung den Selektor ul, das sieht dann so aus:
ul
{
font-size: xx-large;
}
Um den Steckbrief nach deinen Vorstellungen zu gestalten, fehlen dir noch ein paar Kenntnisse zu Eigenschaften und deren Werten, die erfährst du auf der nächsten Seite.
