This article is currently in the process of being translated into German (~99% done).
Linking CSS to HTML
Wie bereits erklärt, enthält CSS Informationen darüber, wie dein Markup (deine Struktur, in der Regel HTML) zu dem Endnutzer präsentiert werden soll. Das bedeutet, dass die beiden Sprachen miteinander verbunden werden müssen – der Browser muss wissen, dass du dein HTML mit CSS liefern möchtest. Um dies zu erzielen, gibt es verschiedene Wege.
Inline-CSS über das Style-Attribut
Nahezu jedes HTML-Tag kann das Style-Attribut verwenden. Über dieses Attribut kannst du CSS direkt, nur für dieses Element, spezifizieren. Dies spielt jedoch der Wiederverwendbarkeit von CSS entgegen, da CSS, welches mit dieser Methode angewandt wird, nur auf einem einzigen Element wirkt und auch nicht für andere Elemente wiederverwendet werden kann.
Dennoch ist es ein guter Weg, um Styles zu testen oder auch um Regeln anzuwenden, welche du nicht wiederverwenden möchtest. So werden Inline-Styles definiert:
<span style="color: Blue; text-decoration: underline;">Hello, CSS!</span>Beachte, dass ich, wie bei einem Selektor auch, mehrere Eigenschaften für das gleiche Element definieren kann. In diesem Fall habe ich Regeln für Textfarbe und -dekoration hinzugefügt. Diese Methode ist mit Abstand die einfachste, um CSS einzubinden, da du keine weiteren Tags oder Dateien anlegen musst – nur lokal definiertes CSS. Trotzdem handelt es sich hierbei nicht um die präferierte Methode, um CSS zu benutzen.
Ein weiterer Nachteil ist die Tatsache, dass der Style-Code jedes Mal erneut heruntergeladen werden muss, wenn die Seite angefragt wird. Für ein einzelnes Element mit ein paar Eigenschaften ist dies kein Problem, jedoch summieren sich diese Regeln, wenn ein Element mehrfach ausgegeben wird und jedes weitere Element die gleichen Styles verwendet. Dadurch wird die HTML-Datei unnötig groß, und der Browser kann das CSS nicht im Cache speichern, wodurch es nur einmal vom Endnutzer heruntergeladen werden müsste. Stattdessen wird der Code immer und wieder heruntergeladen!
CSS für ein gesamtes Dokument via Style-Blocks
Der zweiteinfachste Weg, CSS in einem Dokument anzuwenden ist über die Nutzung eines Style-Blocks. HTML hat einen Style-Tag, welcher CSS enthalten kann. Dort kannst du Regeln definieren, welche innerhalb des gesamten Dokuments angewandt werden. Hier ist ein Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Style blocks</title>
<style type="text/css">
.highlight {
color: Blue;
text-decoration: underline;
}
</style>
</head>
<body>
This is a piece of <span class="highlight">text</span> with <span class="highlight">highlighted</span> elements in <span class="highlight">it</span>.
</body>
</html>Beachte, wie ich mehrere Regeln an einem Ort definieren kann und dann mehrfach innerhalb des Dokumentes wiederverwenden kann. Du kannst mehrere Style-Blocks definieren und sie platzieren, wo du möchtest. Am besten ist es jedoch, wenn du Style-Blocks innerhalb des Dokumenten-Headers (<head>) schreibst.
Globales CSS über externe CSS-Dateien
Mit Style-Blocks kannst du dein CSS in einem Dokument wiederverwenden, du musst es jedoch weiterhin in allen Seiten deiner Webseite einbetten. So muss der Browser auch diesen Block jedes mal mit jeder Anfrage senden, statt externe CSS-Dateien einmalig herunterzuladen und dann für den Endnutzer im Cache zu speichern. Dies ist ein großer Nachteil der Style-Block-Herangehensweise und der Grund, weshalb du in der Regel den dritten Weg nehmen solltest: Die externe CSS-Datei!
Eine CSS-Datei ist eine Plain-Text-Datei, welche mit einer ".css"-Dateiendung gespeichert, und dann in den Dateien, wo du sie anwenden möchtest, referenziert wird. Wenn wir das Beispiel vom Style-Block-Teil übernehmen, dann können wir die ".highlight"-Regel in eine neue Datei kopieren (ohne das HTML außen herum) und unter einem passenden Namen speichern, z.B. style.css:
.highlight {
color: Blue;
text-decoration: underline;
}Dann können wir die Datei in unserem HTML-Dokument über das link-Element referenzieren:
<!DOCTYPE html>
<html>
<head>
<title>Style blocks</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
This is a piece of <span class="highlight">text</span> with <span class="highlight">highlighted</span> elements in <span class="highlight">it</span>.
</body>
</html>Dieses Beispiel setzt voraus, dass die HTML- und CSS-Dateien im gleichen Ordner liegen. Sind sie nicht im gleichen Ordner, muss das "href"-Attribut entsprechend angepasst werden.
Nun definieren wir all unseren CSS-Code in einer eigenen Datei und referenzieren es dann einfach innerhalb aller Unterseiten, um die definierten Regeln zu verwenden! Wenn du möchtest, kannst du deinen CSS-Code in mehrere externe Dateien aufteilen und nur diejenigen im HTML referenzieren, die du brauchst – das alles hängt davon ab, wie groß deine Webseite ist und wie du bevorzugst, deinen Code zu organisieren.
Zusammenfassung
In diesem Kapitel haben wir über verschiedene Wege gesproochen, über die deine Webseite CSS-Code verwenden kann.
Der erste Ansatz war das inline Style-Attribut. Der größte Vorteil ist seine Einfachheit, doch als Nachteil lässt es dich den Code nicht wiederverwenden, was eigentlich das beste an CSS ist.
Der zweite Ansatz war der Style-Block. Es ist nur wenig besser als das inline Style-Attribut, erlaubt aber Wiederverwendung deines CSS-Codes. Der größte Nachteil ist, dass obwohl der Code im gesamten Dokument gilt, dass er nicht in anderen Dokumenten gilt, wodurch du den gesamten CSS-Code-Block auf jeder Unterseite einbetten musst.
Der dritte Ansatz ist der auf Webseiten meistverwendete Weg: Externe CSS-Datei(en). Der einzige Nachteil ist, dass es ein wenig schwieriger ist, damit zu arbeiten, weil das CSS in einer weiteren Datei ist, die du handhaben musst. Ein kleiner Preis, um dein CSS effektiv auf deiner gesamten Webseite wiederverwenden zu können!
In diesem Tutorial werden sich der erste und zweite Ansatz zu Demonstrationszwecken durchziehen. Dem liegt zu Grunde, dass die Beispiele im Tutorial kleine, separate Einheiten sind und keine große Webseite. So kann ich euch HTML und CSS direkt beieinander präsentieren. Du kannst jeden Ansatz benutzen, der dir am besten gefällt, doch für alles andere als solche Tutorials und einfache Webseiten, ist der dritte Ansatz in der Regel der beste Weg!