CSS Grundlagen

Die folgenden CSS Grundlagen helfen Euch anhand von Beispielen die CSS Definition und Formatierungen zu verstehen. Damit bekommt Ihr einen ersten Einblick in Webdesign und Layout mit CSS.

CSS bedeutet ausgeschrieben Cascading Style Sheets und ist eine Gestaltungs- und Formatierungssprache vor allem für Internetseiten und ist Standard bei heutigem Webdesign und Layout. Mit Hilfe von CSS können nicht nur einfache Texte und Inhalte einer Webseite dargestellz und formatiert werden, sondern auch interaktive Elemente wie Navigationen aufgebaut werden.
CSS wird von allen gängigen Browsern unterstützt, allerdings mit Einschränken bei der Darstellung des Layouts. Daher ist es sehr zu empfehlen, mit CSS gestaltete Internetseiten auf den gängigen Browsern in unterschiedlichen Versionen zu testen. Nur so kann sichergestellt werden, dass das Design nirgendwo flasch dargestellt ist.

Was ist ein Tag?

Internetseiten werden mit Hilfe der Seitenbeschreibungssprache HTML geschrieben. Hierbei wird die Formatierung des Inhaltes einer Seite in sogenannten HTML Tags definiert. In der Regel besitzen diese ein einleitendes und ein abschließendes Tag. Tags werden durch spitze Klammern notiert.

Beispiel - Defintion einer Überschrift durch ein Tag

<h1>Das ist eine Überschrift</h1>

Formatierung eines Tags anpassen

Mit Hilfe von CSS können die in HTML vorgegeben Formatierungen geändert und erweitert werden. Hierzu kann die CSS Formatierungen für die HTML Tags direkt innerhalb der HTML Datei festgelegt werden. Alle Elemente der HTML Seite, die von den definierten Tags umschlossen sind, werden gemäß der CSS Formatierung dargestellt.

Beispiel - CSS Definition innerhalb der HTML Definition

<head>
[...]
<style type="text/css">
h1 { border:1px solid black;text-align:center; }
</style>
[...]
</head>

CSS Formatierung in einer externen Datei

Der elegantere und sinnvollere Weg beim Webdesign ist die CSS Formatierung in einer externen Datei zu definieren und diese Datei (also das eigentlich Layout) bei den entsprechenden HTML Seiten einzubinden. Dies hat den Vorteil, dass das Design, das Layout und alle Formatierungen nur einmal definiert werden mÜssen und Überall wiederverwendet werden können.
In der Regel werden derartige externe CSS Dateien mit der Endung .css gespeichert.

Beispiel - CSS Definition in einer externen Datei

h1 {
border:1px solid black;
text-align:center;
}

Beispiel - Einbinden einer externen CSS Definition

Alle Elemente der HTML Seite innerhalb der entsprechenden TAGs werden nun gemäß der CSS Formatierung in der externen Datei dargestellt.

Formatierung mehrere Tags

In CSS ist es möglich, gleiche Formatierungen für mehrere Tags in einer Angabe zu definieren. Im folgenden Beispiel werden alle Überschriften schwarz umrahmt und zentriert dargestellt.
Dennoch ist es auch noch möglich bestimmte Eigenschaften für einzelne Tags seperat festzulegen, in unserem Beispiel die Farbe.

Beispiel - Definition mehrerer Tags in CSS

h1, h2, h3, h4, h5, h6 {
border:1px solid black;
text-align:center;
}

h1, h2 {
color:#ff0000;
}

Bestimmte Eigenschaften einzelner Tags definieren

CSS bietet die Möglichkeit Elemente eines Tags, das bestimmte Eigenschaften hat, gesondert zu formatieren (Fachausdruck: Contextual Selectors). Im folgenden Beispiel sollen alle kursiven Teile einer h1 blau dargestellt werden.

Beispiel - Definition in CSS

h1 i { color:blue; }

Hinweis: Dies gilt neben i für kursiv für alle weiteren HTML Definitionen wie z.B. b, u,...