CSS Tutorial – CSS in eine HTML einbinden
CSS Tutorial – CSS in eine HTML einbinden
Viele Wege führen nach Rom. Um CSS in eine Seite einzubinden gibt es verschiedene Möglichkeiten. Man könnte CSS mit dem style Element direkt in den Quellcode einfügen.
Um beispielsweise einen Text in rot zu schreiben könnte man dies folgendermaßen machen:
Beispielcode HTML:
<pre><html>
<body>
Von diesem Text möchte ich folgende Passage in rot darstellen:<br>
<span style="color:#ff0000;">Hier ist alles rot</span>
</body>
</html></pre>
Um einen Bereich oder ein Bild per CSS formatieren zu können benötigen wir Tags.
Um einen kompletten Absatz zu formatieren könnten wir das p-Tag mit dem style verbinden.
Beispielcode HTML:
<pre><html>
<body>
<p style="color:#ff0000;">Dieser Absatz ist rot</p>
</body>
</html></pre>
Um den kompletten Text des HTML Dokumentes zu formatieren, könnten wir den style in das öffnende html-Tag einfügen.
Beispielcode HTML:
<pre><html style="color:#ff0000;">
<body>
Dieser Absatz ist rot
</body>
</html></pre>
Die zweite Möglichkeit ist es, den CSS-Code aus dem Seiteninhalt in den head-Bereich auszulagern. Sie können im Head-Bereich eines HTML-Dokumentes einen kompletten CSS Block einfügen, der bestimmt, wie die Seite denn aussehen soll.
Beispielcode HTML:
<pre><html>
<head>
<style type="text/css">
html, body {color:#ff0000;}
</style>
</head>
<body>
Dieser Absatz ist rot
</body>
</html></pre>
Wir haben nun mit obigem Code festgelegt, daß der komplette Text der Internetseite in rot angezeigt werden soll. Es gibt viele Möglichkeiten die Internet-Seite mit CSS zu formatieren.
Die bisher genannten sind allerdings sehr unpraktisch und sollte nur verwendet werden, wenn man definitv weiß, daß man an dieser Formatierung innerhalb der Seite nie wieder etwas ändern wird. Sobald die Formatierung von der Optik anderer Seiten in Ihrem Projekt abhängt, sollten Sie definitv den CSS-Code auslagern.
Auch hier gibt es zwei Möglichkeiten. Ich möchte Ihnen zuerst die übliche Methode zeigen, die allerdings nicht die beste ist:
Als erstes muss zu dem HTML-Dokument eine CSS Datei erstellt werden. Diese CSS-Datei kann auch einfach mit dem Editor oder beispielsweise Notepad++ geschrieben werden.
Fügen Sie einfach den folgenden CSS Code in ein leeres Editor Fenster ein und speichern Sie die Datei mit der Endung .css
Ich möchte nun obiges Beipiel in eine externe CSS auslagern.
Beispielcode HTML:
<pre><html>
<head>
<link rel="stylesheet" type="text/css" href="bgdemo.css">
</head>
<body>
Dieser Absatz ist rot
</body>
</html></pre>
Erstellen Sie nun eine CSS Datei und nennen Sie diese bgdemo.css
Beispielcode CSS:
<pre> html, body {color:#ff0000;}</pre>
Beide Dateien müssen sich für dieses Beispiel im gleichen Ordner befinden.
Der Vorteil vom auslagern des Codes liegt auf der Hand. Mit dem ändern einer einzigen Datei kann man die Optik seines kompletten Web-Projektes ändern.
Die link rel Methode ist allerdings nicht die beste. Man könnte nun Grundsatzdiskussionen darüber führen, ob man den Besuchern immer bestmöglich entgegenkommen sollte, oder ob es nicht sinnvoll wäre, sie dazu zu bewegen auf die neuesten Browser umzusteigen.
Ich bin persönlich dafür, daß man versuchen sollte, seine Seite einem größtmöglichen Publikum zur Verfügung zu stellen.
Die link rel Methode hat folgenden Nachteil. Es sind heutzutage noch Browser im Einsatz, die zwar link rel verstehen und somit die CSS Datei als Layout einzubinden versuchen, aber den Inhalt nicht wirklich korrekt darstellen können. Diesen Browsern kann man das Wasser abgraben, indem man die Seite dann überhaupt nicht formatiert. Man mag es kaum glauben, aber eine nicht formatierte Seite kann besser lesbar sein, als eine falsch formatierte Seite.
Diese alten Browser kennen die @import Methode nicht. Das machen wir uns zu Nutze. Wir importieren CSS-Dateien nur noch mit @import.
Wir ersetzen nun in der HTML den link rel Eintrag mit @import
Beispielcode HTML:
<pre><html>
<head>
@import url("bgdemo.css");
</head>
<body>
Dieser Absatz ist rot
</body>
</html></pre>
Sie haben nun alle Möglichkeiten kennengelernt, CSS in eine HTML-Datei einzubinden. Nun kann ich beginnen, Ihnen CSS beizubringen.
Author: Andreas Lang
Andreas Lang konzentriert sich seit zwei Jahrzehnten auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.
