CSS Tutorial - Ein schneller Einstieg in die Grundlagen von Cascading Style Sheets

1. Was sind Cascading Style Sheets?

Cascading Style Sheets (CSS) sind eine Erweiterung zu HTML und dienen vereinfacht ausgedrückt dem optischen Feintuning Ihrer Webseiten.

Mit HTML strukturieren Sie Ihre Webseiten sowohl im Browser sichtbar als auch unsichtbar zum Beispiel über Meta Tags, um Suchmaschinen Informationen über Ihre Webseiten an die Hand zu geben.
Gleichzeitig können Sie Elemente Ihrer Webseiten unterschiedlich auszeichnen.

Mit Cascading Style Sheets werden die Möglichkeiten von HTML deutlich erweitert.
Sie können mit Cascading Style Sheets Elemente pixelgenau positionieren, kleine Animationen erstellen und vieles andere mehr.

CSS ist ebenso wie HTML einfach zu erlernen. Die Syntax von CSS ist aber nicht so intuitiv wie die von HTML (jedenfalls empfinde ich das so).
Erweiterte Möglichkeiten bedeuten auch wieder mehr Anweisungen. Die Liste dieser Anweisungen ist lang und wird immer länger.
Glücklicherweise braucht man in der Regel wie bei HTML nur einen Bruchteil der Anweisungen.
Was das Erlernen von CSS etwas erschwert ist, dass einzelne CSS Anweisungen (außer bei einfachen Formatierungsaufgaben) selten das gewünschte Ergebnis zeigen.
In der Regel führt nur eine Kombination mehrerer CSS Anweisungen zum Erfolg. Man muss also erst einmal überhaupt die erforderlichen Anweisungen kennen und diese anschließend richtig kombinieren.
Um das zu können, ist es erforderlich, nicht nur die entsprechenden Anweisungen (analog zu HTML) zu kennen, sondern auch zu verstehen, wie sich ihr Zusammenspiel auf das Aussehen der Website auf die sie angewendet werden, auswirkt.
Aber keine Bange. Man wächst da mit der Zeit rein.

Wenn Sie eine Hompage selber erstellen wollen, sollten Sie erst die Grundlagen von HTML erlernen und anwenden.
Erst danach sollten Sie sich mit Cascading Style Sheets beschäftigen.
Wenn Sie mit HTML und Cascading Style Sheets gut vertraut sind, können Sie sich mit den zusätzlichen Möglichkeiten, die Ihnen Javascript bietet, bei Bedarf befassen.

Nur diese Lernreihenfolge ist sinnvoll!

zurück zum Inhaltsverzeichnis

2. Die 3 Möglichkeiten Cascading Style Sheets zu verwenden

  1. Sie können Cascading Style Sheets in eine (oder auch mehrere) externe Datei(en) schreiben.
  2. Sie können Cascading Style Sheets individuell in jeder einzelnen HTML Datei notieren.
  3. Sie können Cascading Style Sheets in jeder einzelnen HTML Datei individuell für jedes HTML Element einsetzen.
Dabei ist zu beachten, dass sich die CSS Anweisungen (bezogen auf das gleiche Element) überschreiben und zwar in dieser Reihenfolge:

Cascading Style Sheets aus Punkt 3 überschreiben Cascading Style Sheets aus Punkt 2 und diese überschreiben Cascading Style Sheets aus Punkt 1.
Natürlich überschreiben Cascading Style Sheets aus Punkt 3 auch die von Punkt 1.

Daraus ergibt sich in umgekehrter Reihenfolge die Logik sinnvollerweise alle CSS Stile, die für alle oder viele HTML Dateien der Webpräsenz gelten sollen, in einer externen Datei zu notieren. Diese externe Datei ist in die HTML Dateien, für die sie gelten soll, einzubinden.
Wie das geht, erläutere ich später.

Das notieren von CSS Stilen in einer externen Datei hat 2 Vorteile:

  1. Sie erreichen damit, dass Ihre komplette oder Teile Ihrer Webpräsenz das gleiche Layout haben, was normalerweise gewünscht ist.
  2. Sie brauchen nur einmal einen CSS Stil in Ihrer CSS Datei abändern und diese Änderung wird für alle Seiten in die Ihre CSS Datei eingebunden ist wirksam.
Der 2. Punkt bedeutet natürlich eine enorme Arbeitserleichterung.
Natürlich können Sie mehrere CSS Dateien erstellen und diese individuell in Ihre HTML Dateien einbinden.
Versuchen Sie aber alles von Anfang an so einfach wie möglich zu halten.
Sie werden mit der Zeit feststellen, dass es von selber später noch kompliziert genug wird.

Die Möglichkeit in Punkt 2 nutzen Sie, um CSS Stile in einer HTML Datei festzulegen. Und Punkt 3 ist nützlich, wenn Sie ein einzelnes Element individuell auszeichnen möchten.

zurück zum Inhaltsverzeichnis

3. Die Syntax von Cascading Style Sheets

Cascading Style Sheets sind nach Regeln aufgebaut.

Eine CSS-Regel besteht aus

der Bezeichnung für das Element, auf das die Regel zielt (dem CSS-Selektor)
und
aus einer oder mehreren Eigenschaften (Properties), die dem Element zugewiesen werden.

Jeder Eigenschaft weist man einen Wert zu.

CSS-Eigenschaften stehen in geschweiften Klammern und sind durch Semikolons voneinander getrennt.

Das sieht dann so aus:

selector { Eigenschaft: Wert; Eigenschaft: Wert; Eigenschaft: Wert }

Am Beispiel:

h1 { font-weight: bold; font-size: 36px; color: blue }

Erläuterung:

Weise der Überschrift 1. Ordnung eine fette Schrift, eine Schriftgrösse von 36 Pixeln und die Farbe blau zu.

h1 ist der selector, font-weight, font-size und color sind die Eigenschaften und bold, 36px und blue sind die Werte, die jeder Eigenschaft zugewiesen werden.

Eigentlich ganz einfach oder?

Demnächst werden Sie hier mehr über Cascading Style Sheets lernen!

zurück zum Inhaltsverzeichnis

4. CSS Tutorial Video Kurs

Ich empfehle Ihnen sich ergänzend folgendes Video von Beau Carnes anzusehen:

CSS Full Course
Gutes englischsprachiges Kursvideo für Anfänger über Cascading Style Sheets.

zurück zum Inhaltsverzeichnis

5. Häufige benutzte englische CSS Begriffe ins deutsche übersetzt

Alle CSS Befehle sind in englisch. Auch wenn man gut englisch kann, gibt es viele englische Begriffe in dem Kontext von CSS, die man normalerweise nicht unbedingt kennt.
Deshalb habe ich an diese Stelle ein kleines Wörterbuch englisch => deutsch eingebaut, wo man schnell etwas nachschlagen kann.
Wenn man die deutsche Übersetzung für CSS Befehle kennt, fällt es einem viel leichter zu verstehen, welche Auswirkungen diese Befehle haben.

Die Vokabeln sind alphabetisch sortiert.

align => ausrichten, auf eine Linie bringen
column => Spalte
gutter => Spaltenzwischenräume
justify => justieren, zurichten
properties => Eigenschaften
row => Zeile
wrap => umhüllen, verpacken

zurück zum Inhaltsverzeichnis


Die Datei wurde zuletzt aktualisiert am: 23.02.2020