Einbindung von CSS-Styles
CSS-Eigenschaften können im wesentlichen auf 3 Arten mit HTML verwendet werden:
Inline Styles
Mit dem Universalattribut style können Sie Eigenschaften einem Element direkt zuweisen. Dabei sind nur Deklarationen, also Eigenschaft-Wert-Zuweisungen möglich.
<p style="text-align: center; color: green;">
Dieser Absatz wird über ein style-Attribut formatiert.
</p>
Dieses Beispiel zeigt, wie einem p-Element per style-Attribut verschiedene Formate zugewiesen werden können. Diese Festlegung gilt aber nicht für weitere Textabsätze.
Achtung:
Durch das direkte Festlegen von Formaten, umgangsprachlich auch „Inline-Style“ genannt, gehen viele Vorteile verloren. Der Wartungsaufwand steigt während sich die Flexibilität verringert. Inline-Styles sind an ein Element gebunden und können nicht an zentraler Stelle bearbeitet werden.
Interne Styles
Das HTML-Element style erlaubt es, Formate zentral im head des HTML-Dokuments festzulegen.
<!doctype html>
<html lang="de">
<head>
<style>
h1 {
background-color: green;
color: white;
}
p {
text-align: center;
color: green;
}
</style>
</head>
<body>
</body>
</html>
In diesem Beispiel wird das Format für das Überschriftenelement h1 und alle Textabsätze des Dokuments innerhalb eines style-Elements festgelegt. Das style-Element ist ein Kindelement des head-Elements.
Externe Styles
Im Normalfall besteht eine Webpräsenz aus mehreren (oft hunderten) von Seiten, die alle gleich formatiert werden sollen. Hier hat es sich durchgesetzt, das CSS in einem eigenen externen Stylesheet mit der Endung .css abzuspeichern und mit dem HTML-Element link direkt im head einzubinden.
Einbinden eines externen Stylesheets
<!doctype html>
<html lang="de">
<head>
<link rel="stylesheet" href="stylesheet.css">
...
Das link-Element ist ein Kindelement des head-Elements.
Folgende Attribute gibt es:
rel definiert den logischen Beziehungstyp des Elements. „stylesheet“ bedeutet, dass ein Stylesheet eingebunden werden soll.
href: referenziert die einzubindende Stylesheetdatei
Diese beiden Attribute sind erforderlich und ausreichend, um ein Stylesheet einzubinden. Das link-Element kann aber noch weitere Attribute besitzen, die auf Stylesheets eine Wirkung haben.
Ein Layout oder doch mehrere?
Früher wurden Webseiten oft für eine bestimmte Browserversion und eine festgelegte Bildschirmauflösung entwickelt. Da es zwischen den Browsern gravierende Darstellungsunterschiede gab, wurden mittels einer Browserweiche verschiedene Stylesheets geladen.
Heutzutage geht es eher darum, Webseiten auf allen verfügbaren Ausgabegeräten vom Smartphone bis zum Riesen-Monitor gleichermaßen lesbar zu machen. Wenn die Seitenbreite zur Darstellung der Inhalte nicht mehr ausreicht, werden sie mittels media queries automatisch in ein neues, passendes Design verschoben.
Empfehlung: Das Arbeiten mit CSS erlaubt es, mit Medienabfragen (Media Queries) für Ausgabemedien mit bestimmten Eigenschaften, etwa Tablets, Smartphones aber auch Drucker abweichende Darstellungen innerhalb eines Stylesheets festzulegen. Passen Sie Ihr Layout flexibel an.
CSS erlaubt es, Stile, Farben und Formen zu definieren, beispielsweise für alle Überschriften, oder für alle Textabsätze mit einem bestimmten Klassennamen, oder für kursiv ausgezeichneten Text, der innerhalb einer Tabellenzelle vorkommt.
Die zentralen Formate können sich auf eine HTML-Datei beziehen, aber auch in eine externe Style-Datei ausgelagert werden, die man in beliebig viele Seiten einbinden kann. So werden einheitliche Formatvorgaben möglich, und der HTML-Code wird von unnötigem Ballast befreit. Spätere Änderungen am Design können so leicht durchgeführt werden.
In der folgenden Abbildung dient eine einzige CSS-Datei beispielsweise vier HTML-Dateien als Formatvorlage:
Die folgende Abbildung zeigt den Zusammenhang zwischen HTML und CSS:
Während in HTML der Inhalt semantisch ausgezeichnet wird, wird das Aussehen im Stylesheet festgelegt.
