Selbst die großartigsten Website-Inhalte bleiben ungelesen, wenn sie langweilig präsentiert werden. Daher sollten Sie den mit HTML erstellten Content durch CSS attraktiv aufbereiten. Wie Sie CSS in HTML einbinden und welche Vorteile sich hieraus für Ihre Website ergeben, erklären wir Ihnen in diesem Beitrag.
![→ Leitfaden CSS & HTML für Anfänger [Kostenloser Download]](https://no-cache.hubspot.com/cta/default/53/07f1f640-9445-4bbc-861d-5b336e8d2e3d.png)
Was ist CSS?
CSS (Cascading Style Sheets)ist eine Stylesheet-Sprache, mit der Sie die Inhalte einer Website für verschiedene Ausgabemedien optisch ansprechend formatieren können. Neben HTML und JavaScript ist CSS eine der sogenannten Kernsprachen des Internets und vor allem für das Webdesign unverzichtbar. CSS-Dateien werden auf unterschiedliche Weise in HTML eingebunden.
Wie arbeiten HTML und CSS miteinander?
Die Gestaltung einer Website beginnt immer mit HTML und wird durch CSS abgerundet. Dadurch erreichen Sie eine klare Trennung von Inhalt und Form und können an beiden, falls nötig, mühelos Änderungen vornehmen. Wenn Sie jedes HTML-Element hingegen direkt mit einem Layout versehen, entsteht zwar eine funktionale, aber recht statische Website.
In einem ersten Schritt erstellen Sie die Inhalte der Website mit HTML. Das Ergebnis ist eine Website, die nicht hübsch aussieht, aber mit einer Gliederung, Kapiteln, Überschriften und Absätzen versehen ist und einwandfrei funktioniert.
Sobald dieser Vorgang abgeschlossen ist, erstellen Sie mit CSS das Design. Hierbei haben Sie unter anderem die Wahl zwischen diversen Farben, Layouts und Formen. Haben Sie sich für ein Design entschieden, formatiert die CSS-Datei HTML dementsprechend.
CSS-Code in eine Website einbinden: Drei Möglichkeiten
Es gibt grundsätzlich drei Möglichkeiten, um CSS-Code in eine Website einzubinden. Diese zeichnen sich durch jeweils typische Eigenschaften aus und sind folglich für andere Zielgruppen geeignet. Damit das entsprechende Ausgabemedium die Inhalte und Designs fehlerfrei anzeigt, müssen Sie alle Befehl-Elemente wie Klammern und Attribute korrekt nutzen.
In externer Datei
Bei diesem Vorgehen haben Sie die Möglichkeit, mehrere CSS-Regeln auf eine Vielzahl von HTML-Dateien anzuwenden. So ermöglichen Sie eine eindeutige Trennung von Inhalt und Form und eine leichtere Kontrolle und Wartung. Wenn Sie einen klar strukturierten und logisch aufgebauten Webauftritt mit Angaben für mehrere Websites anstreben, ist diese Methode für Sie geeignet.
Am Anfang des HTML-Dokuments
Bei diesem Ansatz integrieren Sie CSS in den Kopfbereich eines HTML-Dokuments. Inhalt und Form sind somit dicht beieinander, es liegt allerdings eine klare Trennung vor. Dieses Vorgehen eignet sich für Sie, wenn Sie ein bestimmtes Design lediglich für ein HTML-Dokument verwenden möchten.
Direkt im Quellcode
Wenn Sie CSS direkt in den Quellcode integrieren, gelten die gewählten Designregeln nur für ein einzelnes Element. So können Sie zum Beispiel einer Überschrift eine konkrete Farbe, Größe und Form geben. Eine klare Trennung von Inhalt und Form liegt hierbei jedoch nicht vor. Möchten Sie Ihre HTML-Dokumente individuell erstellen und innerhalb des Dokuments verschiedene Layouts, Farben und Formen einsetzen, sollten Sie diese Methode anwenden.
CSS-Code mit externer CSS-Datei einbinden: Anleitung
In den seltensten Fällen besteht ein Internetauftritt nur aus einer Website oder aus wenigen Seiten, die ein jeweils eigenes Design besitzen. Daher ist es oft am sinnvollsten, den CSS-Code als externe Datei einzubinden. Hierdurch erfolgt eine klare Trennung von Inhalt und Form und Sie können die CSS-Datei bei Bedarf leicht verändern und an die jeweiligen Ausgabemedien anpassen.
Verwenden Sie als Bezeichnung der Datei die Endung „.css“, können Sie diese mit einem link-Tag in ein HTML-Dokument einbinden. Folgende HTML-Befehle veranschaulichen diese Herangehensweise:
<!DOCTYPE html>
<html>
<head>
<link rel=“stylesheet“ href=“stylesheet.css“>
</head>
<body>
<h1>Dies ist eine Überschrift</h1>
<p>Dies ist ein Absatz.</p>
</body>
</html>
CSS-Code am Anfang des HTML-Dokuments einbinden: Anleitung
Wenn Sie den CSS-Code am Anfang des Dokuments in das head-Element einbinden, wird es Teil des HTML-Dokuments, ist aber vom eigentlichen Inhalt deutlich getrennt. Durch die Angaben der CSS-Datei werden sämtliche Überschriften auf eine bestimmte Weise gestaltet. Das folgende Beispiel zeigt, wie Sie hierbei vorgehen:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:blue; font-size:14px;}
</style>
</head>
<body>
<h1>Dies ist eine Überschrift</h1>
<p>Dies ist ein Absatz.</p>
</body>
</html>
CSS-Code direkt im Quellcode einbinden: Anleitung
Binden Sie die CSS-Datei in den Quellcode ein, verwenden Sie ein sogenanntes style-Tag. Dadurch können Sie gezielt bestimmte Elemente gestalten, verzichten aber dafür auf viele CSS-Vorteile. So können Sie keine allgemeinen Vorgaben machen, die Sie beispielsweise auf alle h1-Überschriften anwenden.
Zudem ist die Wahrscheinlichkeit groß, dass eine eventuelle Wartung oder Anpassung Ihrer Website deutlich länger dauert als nötig. Immerhin müssen Sie nicht nur eine einzelne CSS-Datei überarbeiten, sondern den kompletten Quellcode. Sollten Sie dieses Vorgehen dennoch nutzen wollen, können Sie das zum Beispiel mit folgendem Befehl tun:
<h1 style=“color:blue; font-size:14px;“>Dies ist eine Überschrift</h1>
Fazit: Optisch ansprechender Webauftritt dank CSS
Für die professionelle Gestaltung einer Website für unterschiedliche Ausgabemedien sollten Sie in jedem Fall eine klare Trennung von Inhalt und Form vornehmen. Das ist am besten möglich, wenn Sie den Inhalt Ihres Webauftritts mit HTML erstellen und diesem anschließend mithilfe einer CSS-Datei ein ansprechendes Aussehen verleihen. Hierbei stehen Ihnen unterschiedliche Möglichkeiten offen, die jeweils andere Vor- und Nachteile mit sich bringen.
Titelbild: Deagreez / iStock / Getty Images Plus
