0251 / 590 837 15

CSS lernen – Tutorial, Tipps und Tricks

Cascading Style Sheets (CSS) ermöglichen einfaches Formatieren von Web-Inhalten. Dazu gehören zum Beispiel:

  • Positionierung von Inhalten
  • Schriftgrößen und Schriftarten
  • Hintergründe

CSS kann direkt im HTML eingebunden oder als eigenständige Datei genutzt werden. Auch eine Formatierung von XML-Dokumenten ist damit möglich.

CSS lernen Sketchnote

Es ist möglich, Objekte pixelgenau zu positionieren. Somit bildet CSS zusammen mit JavaScript die Grundlage für Dynamic HTML (DHTML).

Zudem ist es mit StyleSheets möglich, Sprach-Browsern besseren Überblick über die Aussprache zu geben und und und ...

Entstehung

CSS existiert schon seit Anfang/Mitte des letzten Jahrzehnts. Schon 1996 wurde dazu eine Spezifikation vom W3C herausgegeben, die Level 1 Spezifikation. Diese enthielt nun die ersten konkreten Hinweise zum Aufbau, Syntax und Eigenschaften (etc.).

1998 erschien dann die zweite Spezifikation mit wesentlich mehr Informationen. Hierbei wurde auch erstmals beschrieben, z.B. wie akustische Effekte bei Sprach-Browsern ausgedrückt werden können.

Konzept

Das Grundkonzept von CSS ist relativ einfach: Es wird darauf gebaut, dass die nach einerDTD(Document Type Definition) definierten Elemente innerhalb eines Style-Bereiches oder in einer externen Datei wiedergespiegelt werden (können) und man sie dort mit den jeweiligen Attributen und Werten beschreibt/beschreiben kann.

Unterstützung

CSS wird aktuell von nahezu allen Browsern unterstützt. Nur bei einigen neuen Eigenschaften aus CSS3 kann es zu unterschieden kommen. Dabei haben dann einige Browser bestimmte Elemente noch nicht unterstützt. In der Regel ist es aber so, dass man sie ruhig schon verwenden kann. Wenn zum Beispiel ein Schatten in einem älteren Browser nicht angezeigt wird, ist das oft nicht so wichtig.

Dennoch ist zu empfehlen, eine Seite in mehreren Browsern und auf verschiedenen Endgeräten zu testen. Im Laufe der Entwicklung macht es auch Sinn sich näher mit dem Thema Webanalyse zu beschäftigen, um dort mögliche Darstellungsfehler zu erkennen.

Zukunft

Die aktuelle Version von CSS ist CSS3. Die CSS Working Group vom W3C hat angekündigt, neue Funktionen in Zukunft laufend einzufügen und ggfl. komplett auf eine Versionierung zu verzichten.

Insgesamt soll es noch einfacher werden, Elemente zu selektieren. Auf der Seite des W3 kann man sich die aktuellen Entwürfe für neue Möglichkeiten mit CSS ansehen.

Notation

Die Notation von Cascading Style Sheets verhält sich etwas anders als etwa die von HTML, XHTML oder allgemein XML. Dabei ist darauf zu achten, dass Anweisungen richtig definiert werden, Verknüpfungen korrekt gesetzt werden und und und …

Verknüfungen

Verknüpfungen verbinden zwei Elemente oder ein Element mit einem Attribut durch einen logischen Zusammenhang. Dies stellt eine (neue) Variante des Elements dar. Die Verknüpfung der beiden bezeichnet diese Variante. Dies lässt es zu, Elemente besser zu definieren. Dabei können z.B. bestimmte Elemente/Elementvarianten ein- oder ausgeschlossen werden.
Allgemein werden Verknüpfungen direkt an den Elementnamen notiert.

Farbe und Hintergrundgestaltung

Die Gestaltung von Dokumenten und Seiten kann einerseits durch Farben (z.B. Textfarbe) und andererseits durch die Gestaltung des Hintergrundes weiter verfeinert und verbessert werden. Auch CSS unterstützt diese Formen der Gestaltung. Dazu wurden die folgenden Eigenschaften definiert:

Textgestaltung

Zur Textgestaltung gehören z.B. Wort- und Buchstabenabstand, aber auch Dekoration oder die Ausrichtung des Textes. Für die Textgestaltung sind dafür in CSS Level 1 die folgenden Eigenschaften gegeben:

Schriftgestaltung

In/Mit CSS und DHTML 4.0 wird darauf hin gearbeitet, dass die meisten Text- und Schriftformatierungen zukünftig nur noch bzw. größtenteils mit CSS gemacht werden. Dazu wurden in CSS Schrifteigenschaften definiert, mit denen die bekannten Elemente aus HTML wie etwa u (unterstrichen), b (fett) oder i (italic/kursiv) ersetzt werden können.

Regeln in CSS

In CSS gibt es verschiedene Regeln, die die Bedeutung sowie die Darstellung von Elementen und Dokumenten beeinflussen. In CSS Level 1 und Level 2 sind die folgenden Regeln beschrieben:

Box-Eigenschaften

CSS definiert für jedes Element des Element-Baumes eine Box. Vereinfacht vorgestellt könnte man sich diese Box wie ein Bild vorstellen. Das Element selbst ist das (gemalte) Bild. Um dieses Bild/Element herum wird (meist) ein Rahmen (engl. Border) gezogen. Zwischen Bild und Rahmen wird der Padding- oder Auffüllbereich gesetzt. Er dient z.B. dazu, dass der Rahmen nicht direkt am Bild “hängt”. Um den Rahmen wiederum wird Bereich definiert, der sich Margin- oder Begrenzungsbereich nennt. Er dient dazu, dass andere Bilder/Elemente einen gewissen Mindestabstand zu unserem Bild haben müssen.

Rahmeneigenschaften

Wie im Kapitel CSS – Box-Eigenschaften schon erwähnt gehört zu den Eigenschaften einer Box auch die Definition von Rahmen, welche diese Box umgeben.

Positionierung

Die Positionierung von Objekten ist eines der großen Anwendungsgebiete/-zwecke von CSS . Mit CSS lassen sich (fast) alle Elemente (fast) beliebig verteilen, darstellen und positionieren.

Pseudo-Klassen

Pseudo-Klassen sind Klassifizierungen, die einen Zustand oder eine Eigenschaft eines Elements beschreiben. Sie werden an den Elementnamen bzw. die vorhergehende Klassifizierung angehängt. In CSS Level 1 werden dabei 3 verschiedene Pseudo-Klassen beschrieben, die sich alle auf ein Element beziehen: A (Link/Anker).
In CSS Level 2 sind es dann schon 7.

Pseudo-Elemente

Pseudo-Elemente sind Klassifizierungen, die einen Teil eines Elements beschreiben. “Pseudo” heißen sie deshalb, weil es sich dabei nicht um ein “echtes”, also in derDTDdefiniertes, Element handelt. Sie werden an den Elementnamen bzw. die Klassifizierung angehängt. In CSS Level 1 werden dabei 2, in CSS Level 2 4 (2 weitere), beschrieben.

Tabellen

Zur Beschreibung von Tabellen sind auch in CSS Eigenschaften definiert. CSS Level 1 beschreibt noch keine Tabelleneigenschaften.

Aufrufe

In CSS gibt es verschiedene Aufrufe. Diese dienen meist dazu, Dinge ein zu gliedern oder besser zu bestimmen. In CSS Level 1 und Level 2 sind die folgenden Aufrufe beschrieben:

Schriftdefinition

Seit CSS Level 2 ist es möglich eigene Schrifarten zu definieren, zu importieren und zu gestalten. Dazu werden die folgenden Aufrufe und Eigenschaften zur Verfügung gestellt:

Seitendefinition

In CSS Level 2 werden erstmals Eigenschaften sowie ein Aufruf zur Definition der Seite an sich beschrieben. Mit ihnen soll es möglich sein, beispielsweise einen Ausdruck des Dokuments genau zu beschreiben, um so bessere Resultat zu erzielen.

Benutzereigenschaften

In CSS (ab Level 2) sind auch einige Eigenschaften definiert, die die Benutzerschnittstellen (also weniger das Dokument an sich, als vielmehr mehr das Programm, mit dem es dargestellt wird) beschreiben und somit verändern können.

Counter & Listen

In CSS werden neue Mechanismen zur Verfügung gestellt, die Aufzählungen deutlich anpassungsfähiger machen sollen. Dazu gehören zum einen die neu geschaffenen Counter (counter = engl. Zähler) bzw. Counter-Eigenschaften und zum anderen die Listen-Eigenschaften.

Aurale Gestaltung

CSS Level 2 definiert erstmals auch Eigenschaften die die aurale Wiedergabe eines Elements beschreiben. Diese Eigenschaften sollen z.B. von Sprach-Browsern verwendet werden um die Gestaltung von Texten durch akustische Effekte zu verbessern und somit dem Besucher vielleicht einen spannerenden oder interessanteren Inhalt zu bieten.

Inhaltserzeugung

Seit CSS Level 2 ist es möglich, Inhalt nachträglich in ein Element einfügen zu lassen, ohne dazu den Element-Quelltext verändern zu müssen. Das Ganze war/ist dazu gedacht, dass beispielsweise wiederkehrende Inhalte von Elementen (z.B. Anführungsstriche am Anfang und Ende eines Zitates) nur einmal definiert werden müssen/brauchen und dennoch bei allen Elementen zur Verfügung stehen.

CSS Generator

Mit unserem CSS Generator können Sie die wichtigsten CSS3-Eigenschaften schnell zusammenstellen. Egal ob Verläufe, Schatten oder Mehrspaltigkeit. Wir haben für Sie den richtigen Generator.

CSS generieren

Weitere Artikel