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

Werbebanner Burda Gewinnspiel Bargeld 300x250

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 Ihren Text. Konkret beispielsweise was eine Überschrift ist, wo ein Absatz ist und so weiter.

Mit CSS legen Sie fest, wie jedes HTML Element aussehen soll.

Um Cascading Style Sheets zu verstehen, sollte man wissen, dass jedes HTML Element automatisch mit Cascading Style Sheets versehen ist. Und zwar mit Standardwerten. Dadurch hat eine Überschrift automatisch eine größere Schrift und dadurch erzeugt ein <p></p> Element eine neue Zeile.

Und diese Standardwerte kann man beliebig verändern und ergänzen.

Cascading Style Sheets sind mächtige Werkzeuge. Man kann damit Elemente beliebig auf Webseiten anordnen und festlegen, wie sich Elemente verhalten, wenn sich die Fenstergröße des Browsers ändert. Mit CSS werden Webseiten responsiv gestaltet. Selbst Animationen sind mit CSS problemlos realisierbar. Sie werden sich wundern, was für schöne optische Effekte man damit realisieren kann.

Wichtig: Wenn Sie eine neue Website erstellen, schreiben Sie zuerst nur den HTML Code.
Die Seite sieht dann zwar erst mal bescheiden aus, ist aber voll funktionsfähig. Erst danach sorgen Sie mit Cascading Style Sheets dafür, das sie gut aussieht.
Jeder professionelle Webdesigner arbeitet so und auch Sie sollten sich diese Vorgehensweise zu eigen machen.
Alles Andere führt früher oder später zu Fehlern, die Sie mühsam aufspüren müssen. Das ist verlorene Arbeitszeit.

Cascading Style Sheets sind 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 Befehle. Die Liste dieser Befehle ist lang und wird immer länger.
Glücklicherweise braucht man in der Regel wie bei HTML nur einen Bruchteil dieser Befehle.

Was das Erlernen von CSS etwas erschwert ist, dass einzelne CSS Befehle (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 Befehle kennen und diese anschließend richtig kombinieren.
Um das zu können, ist es erforderlich, nicht nur die entsprechenden CSS Befehle (analog zu HTML) zu kennen, sondern auch zu verstehen, wie sich ihr Zusammenspiel auf das Aussehen von HTML Elementen auf die sie angewendet werden, auswirkt. Aber keine Bange. Da wächst man 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 abweichend vom in der externen CSS Datei festgelegten Standard 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 1: Wert; Eigenschaft 2: Wert; Eigenschaft 3: 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.

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

zurück zum Inhaltsverzeichnis

4. CSS Tutorial Video Kurse

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.

Wenn Ihr Webdesign "responsive" sein soll, also auch auf mobilen Endgeräten gut aussehen soll,
ist der beste Weg aus meiner Sicht, für die Website ein Grid Layout zu wählen.
Was das ist, und wie man das realisiert, wird in dem folgenden englischsprachigen Video von Brad Traversy sehr gut erklärt.

Grid CSS Responsive Website Layout - "Mobile First" Design
Gutes englischsprachiges Kursvideo in dem gut erklärt wird, wie man eine responsive Website mit dem Grid Layout realisiert.

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
grid => Gitter
gutter => Spaltenzwischenräume
justify => justieren, zurichten
properties => Eigenschaften
row => Zeile
wrap => umhüllen, verpacken

zurück zum Inhaltsverzeichnis


Die Datei wurde zuletzt aktualisiert am: 10.04.2022