CSS Tutorial - Ein schneller Einstieg in die Grundlagen von 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.

Nur diese Lernreihenfolge ist sinnvoll!

zurück zum Inhaltsverzeichnis

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.

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.

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.

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

Eine CSS-Regel besteht aus

Jeder Eigenschaft weist man einen Wert zu.

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

Das sieht dann so aus:

Am Beispiel:

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

zurück zum Inhaltsverzeichnis

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.

zurück zum Inhaltsverzeichnis