CSS Tutorial - Ein schneller Einstieg in die Grundlagen von Cascading Style Sheets
- Inhaltsverzeichnis
- 1. Was sind Cascading Style Sheets?
- 2. Die 3 Möglichkeiten Cascading Style Sheets zu verwenden
- 3. Die Syntax von Cascading Style Sheets
- 4. CSS Tutorial Video Kurse
- 5. Häufige benutzte englische CSS Begriffe ins deutsche übersetzt
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.
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!
2. Die 3 Möglichkeiten Cascading Style Sheets zu verwenden
- Sie können Cascading Style Sheets in eine (oder auch mehrere) externe Datei(en) schreiben.
- Sie können Cascading Style Sheets individuell in jeder einzelnen HTML Datei notieren.
- 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.
Wie das geht, erläutere ich später.
Das notieren von CSS Stilen in einer externen Datei hat 2 Vorteile:
- Sie erreichen damit, dass Ihre komplette oder Teile Ihrer Webpräsenz das gleiche Layout haben, was normalerweise gewünscht ist.
- 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.
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.
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:
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!
4. CSS Tutorial Video Kurse
Ich empfehle Ihnen sich ergänzend folgendes Video von Beau Carnes anzusehen:
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.
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 bringencolumn => Spalte
grid => Gitter
gutter => Spaltenzwischenräume
justify => justieren, zurichten
properties => Eigenschaften
row => Zeile
wrap => umhüllen, verpacken