SchulfächerSchulfächer

CSS-Grundlagen

CSS bedeutet Cascading-StyleSheets.
So wie HTML, handelt es sich auch hierbei um eine reine Stylesheet-Sprache.
Mit der Hilfe von CSS kann man das Aussehen/die Erscheinung von html-Elementen anpassen.
Zunächst eine "index.html" HTML-Seite mit grundlegenden Elementen:

 

 

 

 

 

 

Seitentitel

 

 

 

Überschrift

 

 

Ganz viel Text

 

 

Ganz viel Text

 

 

 

 

 

Jetzt erstellt man eine Datei namens "style.css" und platziert diese in das gleiche Verzeichnis.
Und schon kann es mit der Arbeit des CSS losgehen!

In CSS gibt es sogenannte Selektoren. Bei Selektoren handelt es sich um Klassen und ID's.
Es gilt, dass man Klassen so oft wie man will verwenden darf, eine ID jedoch nur ein einziges mal im gesamten HTML-Dokument erscheinen darf!

Im obigen Beispiel gibt es die ID "ueberschrift" und eine Klasse namens "text".
In unsere CSS-Datei fügen wir nun folgendes ein:

#ueberschrift
{
color: blue;
}

.text
{
color: red;
}

Ruft man nun die "index.html" im Browser auf, so sollte die Überschrift blau und der Text rot dargestellt werden. Handelt es sich um eine ID, so setzt man im CSS vor dem Namen der ID eine Raute. Handelt es sich um eine Klasse, so setzt man einen Punkt. Auf diese Art und Weise teilt man dem Browser mit, was sich verändern soll. Weiterhin könnte man noch die Schriftgröße mit

font-size: 20px;

verändern. Selbstverständlich gibt es noch eine ganze Menge weiterer Eigenschaften.
Nach dem Namen von der zu beinflussenden ID oder Klasse öffnet man geschweifte Klammern.
Innerhalb der geschweiften Klammern fügt man anschliessend alle Befehle ein.

Will man die Schriftfarbe verändern, so heißt dies "color". Danach folgt ein Doppelpunkt und die Farbangabe. Hierbei kann man nicht nur auf Wörter, sondern auch auf Hexfarben zurückgreifen und natürlich die Angabe auch in RGB (Rot, Grün,Blau)-Werten vornehmen.

Am Ende jeder Befehlszeile folgt ein Semikolon.

Es ist nicht immer wichtig, allen Elementen eine ID oder eine Klasse zu vergeben. Will man zum Beispiel erreichen, dass alle Textabsätze (

Text

) eine rote Umrandung bekommen ohne dabei per Hand allen

 

-Tags eine Klasse zu geben, so kann man per CSS auch die Absätze direkt ansprechen. Das ganz könnte man so vornehmen:

p
{
font-weight: bold;
border: 1px solid #ff0000;
}

Hier gibt es gleich mehrere Neuheiten:

Zuerst wurde per font-weight: bold; die Schift auf Fettschrift umgestellt. Anschliessend wird um das p-Tag ein Rahmen mit einer Breite von 1 Pixel definiert, welcher solide (also nicht gepunktet, sondern durchgezogen) ist und die Farbe Rot hat (#ff0000).

#ff0000 ist dabei die Hex-Darstellung der Farbe Rot. Je zwei Zeichen stehen hierbei für Rot, Grün und Blau. 00ff00 wäre Grün und 0000ff wäre Blau. Eine Mischung wie ff00ff ergibt Pink.

Beeinflusst wird bei dieem CSS-Block nun allen p-tags im ganzen Dokument. Unabhängig von ihren ID's und Klassen. Haben Sie zusätzliche Klassen oder ID's werden deren Eigenschaften zusätzlich auf das jeweilige p-Tag angewendet.

Hiermit hat man einen sehr kleinen Einblick in die Möglichkeiten, welche CSS bietet, erhalten.