CSS – How to use

Was ist CSS?

CSS ist eine Unterform von HTML und bedeutet „Cascading Stylesheet“, was übersetzt „ “. Mit CSS kann man die grafischen Elemente einer Seite steuern und definieren. Zu diesen grafischen Elementen gehören unter anderem Boxen, Links, Text, Tabellen etc. Damit man nicht für jede Box immer gleich einen komplexen Quellcode schreiben muss, hat man CSS entwickelt. Hiermit lässt sich für Boxen der gleichen Art ein Quellcode schreiben, der dann für jede Box übernommen wird. Damit wird der Quellcode übersichtlich und schlank, womit die Größe der Seite abnimmt. Auch kann man schnell und einfach die Boxen verändern und es muss nur einmal der Code geschrieben werden, der dann von den Boxen übernommen wird. Diese kann man natürlich auch mit allen anderen Elementen machen. Hier mal ein Beispiel:

Unsere Seite hat einen grünen Hintergrund mit gelben Links. Nun soll aber der Hintergrund Gelb werden und die Links müssen ihre Farben ändern. Dafür schreiben wir uns eine CSS-Datei (einfach nur eine normale Datei im Editor schreiben und diese als .css speichern). Das sieht dann folgendermaßen aus:



Wie funktioniert CSS?

An sich ist CSS nicht schwer zu erlernen. Die meisten Befehle kennen wir schon aus dem HTML-Bereich. Neu an CSS ist, das man den Quellcode auslagert, damit der Quellcode der Seite dünner wird. Hierzu erstellen wir dann eine CSS-Datei, also einfach ein Dokument im Editor geschrieben und als .css gespeichert. Damit unsere Hauptseite weiß, wo sie den Code findet müssen wir einfach diesen Code in die Hauptseite im -Bereich einfügen:

Dieser Code ist die Grundlage für CSS. Mit diesem können wir unser Hauptseite sagen, wo sie den Quellcode für die CSS-Sachen finden kann, dies steht hinter „href=“. Um die URL unsres Quellcodes anzugeben benutzen wir relative Pfade, das heißt wir geben nicht den gesamten Pfad an, sondern nur den wichtigen Bereich, also ab wann sich der CSS-Datei-Pfad von dem Hauptseitenpfad unterscheidet. Bei Unterordnern kommt dann ein „…/“, wenn der Ordner darüber liegt kommt ein „…\“ und bei gleichem Ordner schreiben wir einfach nur den Dateinamen.

Die Schreibweise im CSS-Code ist recht einfach struktriert. Wir schreiben immer als erstes den Elementnamen bzw. die ID und dann kommt eine geschweifte Klammer die aufgeht womit wir die Eigenschaften umklammern, denn am Ende der Eigenschaften kommt wieder eine geschweifte Klammer, nur geht diese zu. Also erhalten wir ein Code wie diesen: