Die Formatierung von Webseiten direkt in HTML ist zwar möglich, aber nicht sehr elegant. Was passiert beispielsweise, wenn man die Formatierung aller Überschriften einer Webseite ändern möchte? Dann müsste man in allen h1-HTML-Elementen die Formatierung ändern. Das ist sehr aufwendig und fehleranfällig.
Um das zu vermeiden, kann man die Formatierung in eine eigene Datei auslagern, eine sogenannte CSS-Datei (Cascading Style Sheet). In dieser werden Formatierungsregeln für die HTML-Elemente definiert. So kann man die Formatierung zentral steuern und muss nicht in allen HTML-Dateien die Formatierung ändern!
Hier ein Beispiel für eine CSS-Datei, die die Formatierung der Überschriften und Absätze einer Webseite definiert:
body {
background-color: black;
}
h1 {
color: yellow;
border: 1px dotted pink;
}
p {
color: green;
}2
3
4
5
6
7
8
9
10
11
12
Aufgabe: CSS-Datei
- Welche Formatierungen (z.B. Hintergrundfarbe, Schriftfarbe, Rahmen) werden durch diese CSS-Datei wohl für welche HTML-Elemente definiert?
Lösung: CSS-Datei (nicht angemeldet)
Diese Lösung ist nur für angemeldete Benutzer zugänglich – wenn die LK die Lösung freigegeben hat. Bitte melde dich an, um die Lösung einsehen zu können.CSS-Datei mit HTML-Dokument verknüpfen
Damit der Browser die Formatierung aus der CSS-Datei auch auf die HTML-Datei anwenden kann, muss die CSS-Datei mit der HTML-Datei verknüpft werden. Dies geschieht im head-Element der HTML-Datei mit dem link-Element:
<html>
<head>
<title>Meine erste Webseite</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
...
</body>
</html>2
3
4
5
6
7
8
9
Das link-Element hat zwei Attribute: rel und href. Das Attribut rel gibt an, dass es sich um eine Stylesheet-Datei handelt, und das Attribut href gibt den Pfad zur CSS-Datei an.
Die CSS-Datei muss im gleichen Ordner wie die HTML-Datei liegen und so heissen, wie im href-Attribut angegeben. In unserem Beispiel heisst die CSS-Datei style.css.
Wie funktioniert CSS?
Eine CSS-Formatierungsregel besteht immer aus zwei Teilen:
- Selektor: Wählt HTML-Elemente, für die die Regel gelten soll.
- Formatierungsbefehle: Legen fest, wie diese Elemente gestaltet werden sollen.
Selektor
Mithilfe des sogenannten Selektors werden die HTML-Elemente ausgewählt, für welche die Regeln gelten sollen. Dazu schreibt man den Namen des HTML-Elements, gefolgt von geschweiften Klammern. Zwischen die geschweiften Klammern kommen die Formatierungsbefehle.
element-name {
}2
Wollen wir also alle Überschriften anpassen, dann schreiben wir den folgenden Selektor:
h1 {
}2
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, Masse und vordefinierte Werte zur Auswahl
element-name {
eigenschaft1: wert;
eigenschaft2: wert;
...
}2
3
4
5
Wollen wir also die Schriftfarbe der Überschriften auf Gelb setzen, dann schreiben wir den folgenden Formatierungsbefehl:
h1 {
color: yellow;
}2
3
Aufgabe: Webseite mit CSS gestalten
- Erstelle eine Textdatei mit den folgenden CSS-Regeln und speichere sie im Ordner
webseitealsstyle.cssab.
body {
font-family: Arial, Helvetica, sans-serif;
background-color: black;
}
h1 {
color: yellow;
border: 1px dotted pink;
}
p {
color: green;
}2
3
4
5
6
7
8
9
10
11
12
13
- Füge im
head-Element deiner Webseite(n) den Link zur CSS-Datei ein:
<link rel="stylesheet" href="style.css" />- Lade deine Webseite im Browser neu ( + R).
- Passe Schriftart, Farben und weitere Dinge an, so wie es dir gefällt.
Hier findest du weitere Eigenschaften und Formatierungen, die du in deiner CSS-Datei verwenden kannst:
⭐ Warum sind 3 Schriftarten angegeben?
Da je nach System eine Schriftart nicht verfügbar sein könnte, wird eine Liste mit abnehmender Priorität angeben: Arial, Helvetica, sans-serif.