Von wo kommen die CSS-Anweisungen?
Die CSS-Anweisungen können aus 3 unterschiedlichen Quellen stammen.
Browser-Stylesheet
Wenn wir die HTML-Datei ohne zusätzliche Style-Anweisungen betrachten, können wir erkennen, dass die Überschriften im Gegensatz zu dem normalen Text eine andere Größe angenommen haben. Zu verdanken haben wir das dem integrierten Browserstylesheet. Bestimmte Anweisungen für sämtliche HTML-Elemente sind hier bereits vordefiniert. Meistens handelt es sich hierbei um Anweisungen wie Abstand, Textauszeichnung oder die Größe des Textes.
Benutzer-Stylesheet
Das Benutzer-Stylesheet wird von jedem Benutzer direkt im Browser irgendwo unter Einstellungen verändert. Werte wie Schriftart oder Schriftfarbe überschreiben dabei die Einstellungen vom Browserstylesheet.
Autoren-Stylesheet
Das Autoren-Stylesheet ist das Stylesheet, welches wir mit dem HTML Dokument ausliefern oder direkt im HTML Quellcode geschrieben haben. Ein solches Stylesheet überschreibt die Werte von Browser- und Benutzerstylesheet.
Anweisungen betrachten
Wenn wir die HTML-Datei ohne zusätzliche Style-Anweisungen in der Entwicklerumgebung des Browsers F12 anschauen, dann haben wir einen kleinen Einblick in die Style-Anweisungen des Browser-Stylesheets
Wenn wir auf die gelb umrandete Schaltfläche mit dem kleinen Pfeil klicken, dann können wir auf der Webseite ein Element auswählen.
Im Beispiel ist es das Element <h2> geworden.
Im grün umrandeten Kästchen sehen wir die angewendeten Style-Anweisungen.
Rot unterstrichen steht sogar, von wo die Anweisungen kommen. "user agent stylesheet" ist das Stylesheet vom Webbrowser (Chrome).
CSS-Code erstellen
Es gibt 3 Möglichkeiten, CSS-Anweisungen in HTML umzusetzen.
Inline-Style
Das Inline-Style steht direkt im HTML-Element als Attribut und wird direkt auf dieses Element angewendet.
<body>
...
<p style="color: red">Sichtbarer Teil der Webseite</p>
...
</form>
Alle anderen Elemente sind davon unbetroffen.
<style>-Element in HTML
Das <style>-Element wird im HTML Dokument innerhalb des <head>-Elements geschrieben.
<!DOCTYPE html>
<html lang="de">
<head>
<style>
...
p {color: red;}
...
</style>
</head>
<body>
...
<p>Sichtbarer Teil der Webseite</p>
<p>Ich bin ein Textabsatz</p>
<p>Ein Textabsatz enthält <i>mehrere Inlineelemente <b>die miteinander <u>verschachtelt sind.</u></b></i>
Die Elemente sollten entgegengesetzt zum Starttag wieder geschlossen werden.</p>
...
</body>
</html>
Alle Absätze in diesem HTML-Dokument werden jetzt in roter Farbe dargestellt.
Einbinden externer Ressourcen
Das Einbinden externer Ressourcen ist die beliebteste Variante, um CSS-Anweisungen zu implementieren. Wir werden ausschließlich externe Ressourcen einbinden, weil wir nur einmal eine Zeile in HTML einfügen müssen und den Rest über CSS erledigen werden.
Falls es noch nicht geschehen ist, wird jetzt das Inline-Style und auch das Style-Element aus dem HTML Dokument entfernet. In dem Projektordner erstellen wir nun eine CSS-Datei. Entweder direkt im Ordner eine Textdatei erstellen und diese in "design.css" umbenennen. Oder im Texteditor wird eine Datei mit dem Namen "design.css" in dem Projektordner gespeichert.
Beide Dateien sollten im Ordner zu sehen sein.
Verweisen
Im <head>-Element des HTML Dokuments verweisen wir nun auf unsere CSS-Datei.
<!DOCTYPE html>
<html lang="de">
<head>
...
<link href="design.css" rel="stylesheet">
...
</head>
<body>
...
</body>
</html>Damit ist die CSS-Datei mit dem HTML Dokument verknüpft und alle Anweisungen aus der "design.css" werden in dem HTML Dokument umgesetzt.
Zum Testen schreiben wir in die CSS-Datei:
p {
color: blue;
}
Und aktualisieren nach dem Speichern unsere Webseite.
Damit wissen wir, dass die Verknüpfung erfolgreich war und die Anweisungen aus der CSS-Datei umgesetzt werden.
In CSS können wir auch weitere Stylesheets in das bereits bestehende Stylesheet mit der "@import"-Anweisung einfließen lassen.
@import url("farben.css");
Damit werden neben den Anweisungen der "design.css" auch die Anweisungen der "farben.css" vom Browser geladen.
Weiter mit Syntax