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. Man legt beispielsweise fest, was eine Überschrift ist, wo ein Absatz ist und so weiter.

Mit CSS bestimmt man, 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. Animationen und sogar Spiele sind mit CSS problemlos realisierbar.

Professionelle Webentwickler schreiben zuerst nur den HTML Code einer neuen Webseite. Danach zeichnen sie ihn mit CSS aus.

Als Anfänger wird Ihnen das schwerfallen. Das ist auch kein muss! Aber man sollte sich diese Vorgehensweise möglichst früh angewöhnen.

Cascading Style Sheets sind ebenso wie HTML einfach zu erlernen. Die Syntax von CSS ist aber nicht so intuitiv wie die von HTML. Erweiterte Möglichkeiten bedeuten auch 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 dieser Anweisungen.

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.

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 und/oder PHP bietet, bei Bedarf befassen.

Nur diese Lernreihenfolge ist sinnvoll!

zurück zum Inhaltsverzeichnis

1. Sie können Cascading Style Sheets in jeder einzelnen HTML Datei individuell für jedes HTML Element einsetzen. (Nicht empfohlen!)
2. Sie können Cascading Style Sheets individuell in jeder einzelnen HTML Datei notieren. (Nicht empfohlen!)
3. Sie können Cascading Style Sheets in eine (oder auch mehrere) externe Datei(en) schreiben. (Empfohlen!)

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

Professionelle Entwickler trennen Struktur und Layout von HTML Seiten strikt voneinander. Man sollte Cascading Style Sheets für eine Website in einer externen Datei notieren.

Diese Datei hat die Dateiendung ".css".

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.

Unter Umständen ist es sinnvoll, CSS wie unter Punkt 1 und Punkt 2 beschrieben einzusetzen. Das ist natürlich nicht verboten. Man sollte es nur möglichst vermeiden.

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