- CSS richtig anwenden! › Webstandard-Blog - Webdesign und Webentwicklung

CSS richtig anwenden!

CSS - 18 Aug, 2008

Twittern
Kommentare (4)

Suchanfragen wie und wo CSS in eine HTML-Datei integriert wird oder ob CSS besser per Inline-Style oder externe Datei implementiert werden sollte, finden über die gängigen Suchmaschinen immer häufiger den Weg zum Webstandardblog. Um den Suchenden ein wenig Unterstützung bezüglich dieser Fragen liefern zu können, werden an dieser Stelle die verschiedenen Möglichkeiten der Implementierung von CSS etwas näher vorgestellt und diese auf deren Tauglichkeit testen.

1. CSS per style-Attribut

Dieser Lösungsansatz wird vor allem gern von CSS-Einsteigern am Anfang ihrer CSS-Karriere verwendet. Ein Vorteil dieses Ansatzes ist, dass er von allen gängigen Browser-Herstellern unterstützt wird. Die Style-Eigenschaften werden bei diesem Lösungsansatz innerhalb des body-Tags direkt im entsprechenden HTML-Element definiert. Der Nachteil dieses Ansatzes dürfte vor allem dann deutlichen werden, wenn der Textabsatz innerhalb der Webseite mehrfach verwendet wird. Wenn dann eine Änderung der Schriftfarbe vorgenommen werden sollte, muss dies an mehreren Stellen getan werden, wodurch der Pflegeaufwand der HTML-Datei immens ansteigt und wertvolle Zeit vergeudet wird.

HTML-Code <html> <head> <title>Einbinden von CSS mittels style-Attribut</title> </head> <body> <p style="font-weight: bold;color:blue;">Ich bin ein Textabsatz</p> </body> </html>

Fazit: Eine Empfehlung für diesen Ansatz kann man nicht wirklich abgeben. Da die Angaben für das CSS und damit die Gestaltung der Webseite, sich direkt im HTML-Code befindet, muss für jede Änderung die HTML-Datei angepasst werden. Zudem führt dieser Ansatz, bei entsprechend umfangreichem Layout zu einem steigenden Wert in Sachen Dateigröße und damit wiederum zu einer längeren Ladezeit der Seite, was zu einem klaren Ausschlusskriterium für diese Variante wird. Abgesehen sorgt diese Variante, innerhalb des HTML-Codes, für wenig Übersicht.

2. CSS per style-Element

Der Ansatz per style-Element, verfolgt im Vergleich zum ersten Lösungsansatz, eine strikte Trennung von Inhalt und Layout. Hierbei werden die CSS-Angaben innerhalb des head-Tags definiert. Die Angabe type="text/css" innerhalb des Kopfes der HTML-Datei definiert den MIME Typ, welcher dem Browser mitteilt das der Inhalt vom Typ text/css ist und die CSS-Angaben auch als solche ausgeführt werden. Damit auch ältere Browser, die keine Style-Sheets kennen, die Style-Sheet-Angaben nicht irrtümlich als anzuzeigenden Text interpretieren und im Browser darstellen, sollte der Bereich der CSS-Angaben in einem mehrzeiligem HTML-Kommentar < !-- ... -- > angelegt werden.

HTML-Code <html> <head> <title>Einbinden von CSS per style-Element</title> <style type="text/css">  </style> </head> <body> <p>Ich bin ein Textabsatz</p> </body> </html>

Fazit: Auch wenn bei dieser Variante, Inhalt und Layout getrennt werden und somit für etwas mehr Übersicht sorgen, besitzt auch diese Variante der CSS-Implementierung einen gravierenden Nachteil. Denn wenn die angelegten CSS-Eigenschaften in mehreren HTML-Dokumenten verwendet werden, müssen diese CSS-Eigenschaften mehrfach in den entsprechenden Bereichen der HTML-Seiten integriert werden. Ändern sich CSS-Eigenschaften, müssen diese in sämtlichen HTML-Dateien vorgenommen werden. Dieser dadurch enstehende unnötige Datei-Ballast und der damit verbundene hohe Pflegeaufwand der Seiten, lässt auch diese Variante nicht zur favorisierten Integration von CSS in HMTL werden.

3. CSS per link-Attribut

Dieser dritte Ansatzpunkt zu Integrierung von CSS-Eigenschaften, basiert auf dem Anlegen einer externen CSS-Datei, auf die im Kopf-Bereich eines HTML-Dokumentes referenziert wird. Das link- Element leitet die Verknüpfung zur CSS-Datei ein, wohingegen das Attribut "rel" den Beziehung zur CSS-Datei abbildet. Das Attribut mit dem MIME-Type informiert den Browser, wie in der Vorgänger- Variante bereits erwähnt, darüber dass der Inhalt vom Typ text/css ist. Im Attribut href, wird der Pfad zur separaten Stylesheet-Datei styles.css angegeben.

HTML-Code <html> <head> <title>Einbinden einer externen CSS-Datei mittels link-Attribut</title> <link rel="stylesheet" media="all" type="text/css" href="css/styles.css" /> </head> <body> <p>Ich bin ein Textabsatz</p> </body> </html>

In der im Header der HTML-Datei referenzierten CSS-Datei styles.css können folgende CSS-Eigenschaften enthalten sein.

CSS-Code p { font-weight: bold; color:blue; }

Fazit:Diese Alternative und bei weitem eleganteste der bisherigen Lösungen zur Integrierung von CSS-Eigenschaften, verweist dank dem link-Element direkt auf eine CSS Datei mit dem Namen styles.css, deren CSS-Eigenschaften für mehrere Dateien und Ausgabemedien gültig sein können. Diese Variante führt zu einer 100%-igen Trennung zwischen dem mit HTML-Tags ausgezeichneten Inhalten und der Gestaltung der Inhalte. Diese Variante zur Integration von CSS-Eigenschaften ist aufgrund seiner hohen Felxibilität und dem geringen Zeit- und Arbeitsaufwand, bei eventuellen CSS-Anpassungen absolut zu empfehlen.

4. CSS per @import

Diese vierte Möglichkeit der Implementierung von CSS Anweisungen, erfolgt mittels @import einer separaten CSS-Datei. Dieser Ansatz ermöglicht es ebenso wie Lösungsvorschlag zuvor, dass das entsprechende Ausgabemedium innerhalb der Referenzierung auf die CSS-Datei mit festgelegt werden kann. In diesem Beispiel ist es die Ausgabe für den Monitor.

HTML-Code <html> <head> <title>Einbinden einer externen CSS-Datei mittels @import</title> <style type="text/css">  </style> </head> <body> <p>Ich bin ein Textabsatz</p> </body> </html>

Der @-import von CSs-Dateien ist nicht nur innerhalb einer HTML-Datei, sondern auch innerhalb von CSS-Dateien möglich. Bevor bei dieser Variante die Eigenschaften für die Webseite wie üblich definiert werden, wird ein @import zu einer weiteren CSS-Dastei durchgeführt. Im folgenden Beispiel werden die CSS-Eigenschaften der additionalStyles.css vor dem p-Tag und seinen Eigenschaften geladen.

CSS-Code @import url(css/additionalStyles.css); p { font-weight: bold; color:blue; }

Wichtig beim @import innerhalb einer CSS-Datei ist es, dass dieser vor allen anderen CSS-Regel aufgeführt wird. Die Reihenfolge der CSS-Angaben ist hierbei ausschlaggeben. Denn beim @import geht es nach dem Motto: "Wer zuletzt kommt, wird vom Browser abgebildet". Würde innerhalb der additionalStyles.css bspw. ein p-Tag die Schriftfarbe rot bekommen, würde diese durch die Farbangabe innerhalb der styles.css überschrieben und blau dargestellt werden.

Fazit:Da auch diese Variante der Integration einer CSS-Datei in ein HTML-Dokument auf einer strikten Trennung von Inhalt und Layout basiert, ist diese Variante ebenso wie die Vorgängervariante, absolut zu empfehlen. Ein weiterer Vorteil dieser Variante ist, dass solch ein @import auch innerhalb der CSS-Datei (styles.css) enthalten sein kann. Das führt dazu, dass beim Laden einer CSS-Datei, die einen @import-Befehl zu einer weiteren zusätzlichen externen CSS-Datei (additionalStyles.css) enthält, der Browser auch diese Datei lädt und deren Eigenschaften abbildet. Oftmals wird ein @import dazu verwendet um bspw. Schrifteigenschaften in einer separaten CSS-Datei aufzuführen dun getrennt vom "Layout" aufzubewahren.

Gerade bei umfangreichen Layouts mit mehreren hundert Zeilen HTML- bzw. CSS-Code kann somit das ein oder andere Kilobyte in Sachen Quelltextüberschuß eingespart werden, von der besseren Übersicht eines auf diese Weise angelegten HTML-Codes ganz zu schweigen. Für Profis und Kenner von CSS sind dies sicherlich keine Neuigkeiten, aber bedenkt das jeder einmal klein anfängt. Die Such- und Mailanfragen zu diesem Thema haben uns zum Entschluss kommen lassen, dass auch solche Tipps für CSS-Einsteiger von Nöten sind. Wer mehr über Tipps und Tricks im Umgang mit CSS erfahren möchte, wird im Buch "CSS-Design. Die Tutorials für Einsteiger" fündig.

Michael 18 Aug 2008, 15:33

Eine schöne Übersicht.
Webstandard-Team
18 Aug 2008, 15:44

Danke Michael ;o)
GE
18 Aug 2008, 19:21

Inline-Styles im html sind sinnvoll für einmalige Formatierungen, z. B. die margins für ein Bild. Da ist es nicht immer sinnvoll, gleich eine Klasse in der style.css zu definieren, nur um ein bestimmtes Bild zurechtzurücken.

Wo ich mein css hinschreibe ist immer abhängig davon, wie oft ich ein und die selbe Gruppe von css-Anweisungen verwenden will.

Wenn eine Seite anders aussehen soll als alle anderen, dann schreibe ich das css in den head-Bereich.

Wenn nur eine Überschrift anders aussehen soll als alle anderen, dann formatiere ich diese direkt im html.

CSS, das für alle oder mehrere Seiten relevant ist, gehört natürlich in die style.css.
Webdesign Köln
24 Dez 2008, 12:53

Danke für die schöne Auflistung. Ich tendiere meist zu #3.
Fröhliche Festtage!