Cascading Style Sheets

Die Webseite soll ja nicht nur einen tollen Inhalt haben, sondern auch grafisch etwas hermachen. Dazu formuliert man «Formatvorlagen», sogenannte CSS-Regeln.

Eine Regel besteht immer aus zwei Teilen:

1. Für welche Elemente soll sie gelten?
2. Wie sollen diese Element gestaltet werden?

Selektor

Mit Hilfe des sogenannte Selektors werden die Elemente ausgewählt, für welche die Regeln gelten sollen. Wir verwenden nur den Element-Selektor (es gibt noch andere).

element-name {
}

Die obenstehende Regel gilt für alle Elemente vom Typ element-name. Zwischen die geschweiften Klammern kommen nun die Formatierungsbefehle.

Wollen wir also alle Überschriften anpassen, dann schreiben wir den folgenden Selektor:

h1 {
}

Formatierungsbefehle

Formatierungsbefehle bestehen aus dem Namen der Eigenschaft die man formatieren möchte und einem Wert. Je nachdem was formatiert wird, stehen als Werte Farben, Grössen und vordefinierte Werte zur Auswahl:

element-name {
  eigenschaft1: wert;
  eigenschaft2: wert;
  ...;
}

Beispiel

Die folgenden Regeln legen eine andere Schriftart^[1] fest, machen den Hintergrund der Seite schwarz^[2], den Text farbig^[3] und dekorieren die Überschrift mit einem Rahmen^[4]:

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: black;
}

h1 {
  color: yellow;
  border: 1px dotted pink;
}

p {
  color: green;
}

mit HTML-Dokument verknüpfen

In den HTML-Dokumenten können wir nun einen Verweis auf die CSS-Datei hinzufügen. So können auch mehrere HTML-Dokumente dieselbe CSS-Datei verwenden:

<html>
  <head>
    <title>Meine erste Webseite</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  ...
</html>

Aufgabe

• Erstelle eine Textdatei mit dem obenstehenden CSS-Regeln und speichere sie im Ordner webseite als style.css ab
• Füge im head-Element deiner HTML-Dokumente einen Link zur CSS-Datei ein (Zeile 4, unterhalb von title)
• Lade dein HTML-Dokument im Browser neu (+R)
• Passe Schriftart, Farben und weitere Dinge an, so wie es dir gefällt

Hier findest du weitere Eigenschaften:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften

---

1. Die Eigenschaft font-family wird gesetzt. Da je nach System eine Schriftart nicht verfügbar sein könnte, wird eine Liste mit abnehmender Priorität angeben: Arial, Helvetica, sans-serif; ↩︎

2. Mit der Eigenschaft background-color kann die Hintergrundfarbe eines Elementes gesetzt werden. Es können Namen für Farben eingesetzt oder Farbcodes verwendet werden. ↩︎

3. Die Eigenschaft color wird verwendet, um die Überschrift gelb und den Text grün zu färben. ↩︎

4. Mit border kann ein Element mit einem Rahmen versehen werden. Dazu müssen drei Eigenschaften aufs Mal angegeben werden: border-width, border-style und border-color ↩︎