CSS-Grundlagen

Wer sich bereits mit HTML auseinander gesetzt hat, der hat sicherlich auch schon einmal etwas von CSS gehört. CSS, das steht für "Cascading Style Sheets" regelt die Darstellung von HTML-Dokumenten. Bei CSS, was grob übersetzt für "geschachtelte (kaskadierende) Gestaltungsvorlagen steht, handelt es sich um eine Deklarationssprache. Auch hierbei spricht man bewusst nicht von einer Progammiersprache, da diese lediglich hilft etwas genauer zu deklarieren. Genutzt wird diese Sprache unter anderem in Verbindung mit HTML-Dokumenten.

Wieso gibt es CSS?

In den Anfängen von HTML, war es üblich das Stilanweisungen, wie etwa Schriftgröße und Schriftfarbe innerhalb des HTML-Dokumentes standen. Da dies einerseits den Code unleserlicher für uns Menschen machte und andererseits die Übersetzermechanismen von Computern immer wieder erweitert werden mussten, entschied man sich im Sinne der Ordnung den Informationsinhalt HTML und die Stilisierung voneinander zu trennen. So entstand CSS als separate Dateien zum HTML. Zwar kann man die Stilisierung eines HTML-Dokumentes noch immer direkt innerhalb des HTMLs deklarieren, genannt seien hier Befehle wie "font" und "center", jedoch gelten diese Befehle bereits als veraltet. Der Standard HTML5 besitzt diese Befehle daher nicht mehr in seiner Spezifikation.

Das erste CSS mit Beispielwebseite

Zunächst folgt der HTML-Code einer Beispielwebseite.

 

 

 

 

Beispielwebseite

 

 

 

 

Das ist eine Überschrift

 

 

Das ist ein Absatz eines Textes

 

Ein Link

 

 

Im Kopf der Webseite sieht man, dass eine CSS-Datei eingebunden wird. Der Inhalt der CSS-Datei lautet wie folgt:

h1 { color: blue; }

p { font-size: 16px; }

a:hover { font-weight: bold; }

Schaut man sich nun die Webseite an, so sieht man, dass die Überschrift die Farbe Blau besitzt und dass der Textabsatz

in Schriftgröße 16 dargestellt wird. In CSS deklariert man zunächst was von den Änderungen betroffen werden soll und anschließend in geschweiften Klammern, welche Änderung vorgenommen werden soll.

Was bedeutet die letzte CSS-Zeile ?

Hinter "a" befindet sich ":hover", was ein sogenannte "Pseudoselektor" ist. Dies bedeutet, dass wenn der Mauszeiger über das a "hovert", so soll die Veränderung geschehen. In diesem Beispiel verändert sich die Schriftart des Links in Fettschrift.

Mit diesen CSS-Anweisungen werden jedoch immer alle h1, p und a verändert. Was ist, wenn man nur ein p-Tag verändern möchte?

In diesem Fall verfügt CSS über sogenannte ID's.

Das HTML würde so aussehen:

 

Roter Text

 

Im CSS schreibt man anschließend:

#rot { color: red; }

Wichtig ist, dass die Raute vor dem Namen der ID innerhalb des CSS gesetzt wird. Eine Raute deklariert eine ID im HTML-Dokument. Es gilt hierbei darauf zu achten, dass ID immer nur einmal pro Seite existieren. Eine ID sollte nicht zwei- oder mehrfach vorhanden sein.

Muss man nun allem eine ID geben?

Grundlegend nein. Will man mehrere Elemente mit den gleichen Eigenschaften ausstatten ohne dabei tatsächlich alle Elemente zu verändern, so kann man diesen auch Klassen zuweisen.

 

Grüner Text

 

 

Noch ein grüner Text

 

Das CSS lautet dann:

.gruen { color: green; }

Bei Klassen wird vor dem Klassennamen im CSS ein Punkt gesetzt. Im HTML verwendet man statt "id" einfach ein "class". Diese Elemente dürfen mehrfach im gesamten Dokument auftreten.

Muss CSS immer in einer eigenen Datei?

Nein, CSS kann auch im Kopf-Bereich des Dokumentes eingesetzt werden. Hierzu verwendet man folgenden Quellcode:

 

Innerhalb von CSS ist es weiterhin möglich Kommentare zu verfassen. Wie das geht, zeigt das obige Beispiel. Auch CSS direkt in den HTML-Elementen ist möglich, jedoch nicht gerne gesehen, da dies dem früheren Konzept mit und

gleicht.

 

 

 

Blauer Text