Aus aktuellem Anlass folgt hier nun ein Einsteiger-Tutorial zum Thema CSS. Euch wird erklärt, was CSS überhaupt ist, warum ihr es beim Coden eurer Webseite unbedingt verwenden solltet und schließlich folgt eine kurze Einführung in die wichtigsten CSS-Befehle.
was ist CSS?
Der Begriff CSS steht für Cascading StyleSheets, was soviel bedeutet wie kaskadierende (absteigende) Formatierungsangaben. Das Kaskadieren hat etwas mit dem Vererben von Eigenschaften zu tun und muss euch an dieser Stelle erstmal nicht interessieren, also keine Angst. :o)
Mit Hilfe von CSS kann man die Ausgabe der HTML-Elemente steuern, also zum Beispiel die Schriftfarbe und -art festlegen.
Das geht rein theoretisch auch direkt im HTML (bspw. <font color=”red”>…</font> oder <body bgcolor=”black”>) , aber das ist extrem veraltet und unpraktisch, weswegen ihr die font-Tags und Konsorten auf keinen Fall mehr verwenden solltet.
Wichtig ist, dass CSS die Struktur eurer Seite (also das HTML mit seinen Elementen wie Überschriften, Absätzen und Bildern) vom Aussehen (Schriftgröße, Hintergrundfarbe, …) trennt. Das ist ein großer Vorteil für euch: wenn ihr beschließt, die Farbe der Überschriften auf eurer Webseite von Grün zu Blau zu ändern, müsst ihr lediglich eine einzige Zeile in eurer CSS-Datei ändern und schon habt ihr sämtliche Überschriften auf eurer ganzen Seite geändert – praktisch! Wenn ihr die veralteten HTML-Farbangaben verwendet hättet, müsstet ihr bei jeder einzelnen Überschrift die Farbe neu eintippen.
Durch CSS spart ihr also nicht nur Zeit und Aufwand, sodern zudem wird eurer Quellcode auch viel schlanker, was für Übersichtlichkeit sorgt und Ladezeiten spart.
und wie geht das?
Zunächst legt ihr eine neue Datei an und speichert sie als style.css, dann ladet ihr diese auf euren Server. In dieses sogenannte Stylesheet notiert ihr später alle Formatierungsangeben eurer Webseite. Dazu muss die CSS-Datei natürlich in eure Seite eingebunden werden – im Head-Bereich (also zwischen <head> und </head>) notiert ihr dazu:
<link rel="stylesheet" type="text/css" href="style.css" />
Den Pfad müsst ihr natürlich gegebenenfalls anpassen, falls das Stylesheet nicht im gleichen Verzeichnis liegt wie die restlichen Dateien.
Aus eurer HTML-Datei könnt ihr nun sämtliche Styleangeben entfernen und stattdessen im Stylesheet notieren.
Wenn ihr die Hintergrundfarbe eurer Seite also bisher durch <body bgcolor=”#ffffff”> festgelegt habt, lasst ihr in der HTML-Datei nur das <body> stehen und schreibt in der style.css:
body {
background: #ffffff;
}
Ihr notiert also zunächst den Namen des HTML-Elements und schreibt dann in geschweiften Klammern, wie es aussehen soll.
Damit dieses Tutorial nicht zu umfangreich wird, verweise ich an dieser Stelle mal auf weiterführende Anleitungen: