Es gibt unendlich viele Vorteile, die die Nutzung von Cascading Style Sheets (CSS) bringen. Um nur einige zu nennen: Minimale Datei-Größe, kürzere Download-Zeiten und Vereinfachung jeglicher Maintenance.
Um diese Stärken für eigene Projekte nutzen zu können, ist es wichtig, CSS in der richtigen Art und Weise anzuwenden. Es gibt vier Möglichkeiten:
Inline Styles:
Diese werden innerhalb eines Tags definiert. Sie können die Form <p style=“text-align: center;“> annehmen, wenn dieser Absatz in der Mitte angeordnet werden soll. Diese Art von CSS sollte nur in Ausnahmefällen genutzt werden, da sie die Presentations-Informationen nicht von dem HTML Code trennen. Alle oben genannten Vorteile von CSS treffen nicht auf Inline Styles zu.
Embedded Styles:
Diese werden innerhalb des <head> tags definiert und sind im Hinblick auf Maintenance sicherlich besser, da man eine Änderung für alle Absätze innerhalb des Dokumentes nur einmal vornehmen muss. Doch auch hier wir der Code unnötig aufgebläht und die Styles müssen für jede Seite vom Browser geladen werden. Die Form der embedded styles ist <style type=“text/css“>p {text-align: center;}</style>
External Styles:
Diese Methode hat alle oben genannten Vorteile. Maintenance könnte nicht leichter sein. Man muss nur die CSS-Datei aktualisieren, damit Änderungen für die gesamte Website in kürzester Zeit durchgeführt werden. Die CSS-Datei bleibt im Browser-Cache. Somit müssen die Presentations-Informationen nicht noch einmal geladen werden, was das Ganze viel schneller macht.
Innerhalb des <head> tags wird der Link zu dem externen style sheet in der folgenden Form definiert: <link rel=“stylesheet“ type=“text/css“ href=“external.css“>. Dies setzt voraus, dass man vorher oder nachher eine CSS-Datei mit Namen external.css erstellt wird. External.css könnte auch styles.css oder ähnlich heissen. Es ist nur wichtig, dass der Dateiname genau mit der Referenz in <link> übereinstimmt und sich die CSS-Datei im gleichen Ordner befindet (wenn nicht, dann muss man den genauen Pfad angeben). In der CSS-Datei wird die Absatzformattierung in folgender Art definiert: p { text-align: center;}.
Imported Styles:
Sind eigentlich nicht dazu bestimmt in HTML Dokumenten definiert zu werden. Dennoch macht ihre Nutzung Sinn. Ältere Browser, welche Stylesheet Informationen oftmals falsch interpretieren und Websites in kompletten Caos darstellen können, ignorieren imported styles und stellen die Website mit dem Browser-spezifischen style dar.
Innerhalb des <head> tags, nach dem <title> tag definiert man <link type=“text/css“>@import url(external.css);</style>
Stylesheets können für unterschiedliche Medien erstellt werden. In einem external style würde man media=“screen“ für das Website-Stylesheet bestimmen und media=“print“ für den Druck. Denn man sollte wirklich vermeiden, dass eine Website, welche einen schwarzen Hintergrund hat, alle schwarze Tinte des Druckers verbraucht, nur um die Hintergrundfarbe zu drucken;-)