CSS Grundlagen

CSS steht für Cascading Style Sheets, was so viel heißt wie stufenförmige Gestaltungsvorlagen. Die Cascading Style Sheets sind eine Sprache zum Formatieren von vor allem HTML-Dokumenten.

Im Prinzip wird die Formatierung einer Webseite (Layout, Farbe, Schriftarten,…) hauptsächlich mit CSS vorgenommen. HTML wird selten für diesen Zweck verwendet und ein HTML-Dokument soll eigentlich nur den Inhalt, bzw. die inhaltliche Gliederung einer Seite enthalten. Vor der Einführung von CSS war das Formatieren von mehreren Webseiten ein ziemlich großer Arbeitsaufwand, da die Tags in jedem Dokument neu definiert werden mussten. Mittels CSS ist es heutzutage möglich, die Informationen für die Darstellung einer Seite in einer externen .css Datei zu speichern. Diese Datei wird mit dem link Tag im head in das HTML-Dokument eingebunden: 

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

Somit können zahlreiche Seiten in einer Website mit nur einer CSS-Datei formatiert werden, was sehr viel Arbeit erspart, wenn man z.B. die Schriftart seiner Homepage ändern will. In diesem Fall müsste man nur in der CSS-Datei eine kleine Änderung vornehmen, anstatt in jedem HTML-Dokument den font Tag zu editieren.

Syntax

Eine CSS Regel ist folgendermaßen aufgebaut:

Der Selektor bestimmt das HTML-Element, welches formatiert werden soll.

Eine Deklaration besteht aus einer Eigenschaft und einem Wert.

Die Eigenschaft ist das zu verändernde Style-Attribut (color, font-size, text-decoration,…)

Der Wert kann die Größe der Schrift (10px, 16px,…), die Farbe (blue, #0000A0) und vieles mehr bestimmen.

Beispiel: 

p
{
  text-align:center;
  color:#0000A0;
  font-family:Calibri;
  font-size:40px;
}

Durch diesen Code wird in jedem Absatz-Tag (<p> … </p>) die Schriftart „Calibri“, die Schriftgröße 40 Pixel und die Farbe Blau (#0000A0 ist die Hexadezimaldarstellung der Farbe) verwendet. Außerdem wird der Text zentriert.

Die wichtigsten Befehle

Hier eine Liste der am häufigsten verwendeten CSS-Befehle:

Befehl Bechreibung
Links
A:link Link
A:visited Besuchter Link
A:hover Link beim Drüberfahren mit der Maus
A:active Angeklickter Link
Boxenmodell
margin-left Abstand nach außen links
margin-right Abstand nach außen rechts
margin-top Abstand nach außen oben
margin-bottom Abstand nach außen unten
padding-left Abstand nach innen links
padding-right Abstand nach innen rechts
padding-top Abstand nach innen oben
padding-bottom Abstand nach innen unten
width Breite
height Höhe
border Rahmen
Positionierung
position:absolute Absolute Position
position:relative Relative Position (relativ zur Standardposition)
position:fixed Wie absolute, bewegt sich beim Scrollen aber nicht
position:static HTML Standard Positionierung
Textformatierung
font-family Schriftart (Calibri,…)
color Schriftfarbe
font-size Schriftgröße
text-align Textausrichtung
Hintergrund
background-color Hintergrundfarbe
background-image Hintergrundbild
background-attachmentBestimmt, ob sich ein HG beim Scrollen mitbewegt
background-repeat Wiederholung des HG (horizontal, vertikal, keine WH)

Id und Class

ID- und Klassenselektoren werden verwendet um CSS-Elemente eindeutig zuzuordnen. Sie sind sogenannte Bezeichner für CSS-Elemente.

Man weist einem HTML-Tag folgendermaßen eine ID bzw. eine Klasse zu: 

<p id="uberschrift">Überschrift</p>
<p class="inhalt">Inhalt</p>

Der Absatz mit der ID „uberschrift“ bzw. mit der Klasse „inhalt“ wird dann entsprechend formatiert. Das CSS-Dokument könnte in diesem Fall z.B. so aussehen: 

#uberschrift
{
  color:blue;
  font-size:20px;
  font-family:Calibri;
}
.inhalt
{
  color:green;
  font-size:16px;
  font-family:Arial;
}

Eine ID wird mit einer Raute (#) vor dem Namen definiert, eine Klasse mit einem Punkt (.).

Man kann festlegen, für welchen HTML-Tag eine Klasse gültig sein soll. Dazu wird der Tag (a, p, h1, …) vor den Punkt geschrieben.

Beispiel: 

p.inhalt
{
  color:green;
}

Im Beispiel wird bestimmt, dass die Klasse „inhalt“ nur für Absätze (p) gilt. 

<h1 class="inhalt">Text</h1>

Die Überschrift (h1) würde in diesem Fall nicht formatiert werden.

Unterschied zwischen Id und Class

ID- und Klassenselektoren haben im Prinzip dieselbe Funktion. Es gibt aber dennoch einen bedeutenden Unterschied:

Die ID wird verwendet um ein bestimmtes, einzigartiges Element zu definieren, wohingegen die Klasse für mehrere Elemente benutzt wird. Zum Beispiel könnte man einer Übersicht, die es ja nur einmal gibt, eine ID zuweisen.

Kommentare

Kommentare sind vor allem in längeren CSS-Dokumenten hilfreich. Sie werden vom Browser vollkommen ignoriert und weder als Formatierung oder Inhalt interpretiert.

Ein Kommentar beginnt mit 

/*

und endet mit 

*/
/* Das ist ein Kommentar */