Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt
Sie befinden sich: Startseite » CSS lernen » Aufbau CSS Befehle

Aufbau (Syntax) von CSS-Befehlen

Der Aufbau einer CSS-Anweisung ist eigentlich sehr einfach. Wichtig ist im ersten Schritt das Verständnis des Aufbaus der CSS-Anweisungen (sprich was von Computercracks immer so hübsch als Syntax bezeichnet wird).

CSS-Anweisung flapsig in Deutsch beschrieben:

BEI WEM soll welche EIGENSCHAFT einen bestimmten WERT annehmen.

Als Beispiel:
Alle <h2> Überschriften sollen bei Ihrer Eigenschaft Schriftfarbe den Wert blau annehmen.

oder

Alle Bilder (<img ...>) sollen bei der Eigenschaft Rahmen diesen in Blau mit 1 Pixel Rahmenstärke angezeigt werden.

Die oben genutzten Farben finden sich nun im Quellcode wieder. Die Schreibweise im Quellcode, mit Eigenschaft und Wert, sieht dann wie folgt aus. Wichtig ist, dass es geschweifte Klammern sind!


h2 { color: blue; }

In den folgenden Darstellungen wird zwecks Übersichtlichkeit, anstelle der Hintergrundfarbe, die Schrift mit der entsprechenden Farbe dargestellt werden!

h2 { color: blue; }

Geschweifte Klammern bei CSS { }

Die geschweiften Klammern {} umfassen die Kombination Eigenschaft und Wert. Die Klammern sind deshalb wichtig, da es möglich ist (und in der Realität sehr häufig vorkommt), dass mehrere verschiedene Anweisungen in Form von „Eigenschaft: Wert“ für ein Element vorhanden sind.

FÜRWEN { 
  Eigenschaft1: Wert1; 
  Eigenschaft2: Wert2; 
  Eigenschaft3: Wert3; 
}

Beispielweise Festlegung von Vordergrundfarbe, Hintergrundfarbe und Rahmen.

Ich ziehe es vor, jeder Eigenschaft-Wert-Kombination im Quellcode eine eigene Zeile zu gönnen, was den Quellcode übersichtlicher macht.

Als Beispielcode für Vorder- und Hintergrundfarbe:

h2 { 
    color: blue; 
    background-color: black; 
}

Die geschweiften Klammern erhält man unter Windows durch die Kombination der Taste Alt Gr und der Taste 7 bzw. die schließende Klammer mit Alt Gr + 0. Es gibt eine weitere Möglichkeit unter Windows für Nutzer, die die rechte Seite der Tastatur nicht mögen (wo die Taste Alt Gr sitzt): die öffnende geschweifte Klammer erhält man unter Windows auch mit der Tastenkombination Strg + Alt + 7 und die schließende geschweifte Klammer mit Strg + Alt + 0.

Windows Mac
{ Alt Gr + 7 alt + 8
} Alt Gr + 0 alt + 9

Beim Mac erhält man die öffnende geschweifte Klammer über alt + 8 und die schließende Klammer über alt + 9.

Der beliebteste Fehler bei CSS

Das Semikolon ; nach dem Wert ist wichtig – extrem wichtig! Es schließt die Kombination von „Eigenschaft: Wert;“ ab. Das ist deshalb so wichtig, da mehrere Eigenschaften festlegbar sind.

Fehlt das Semikolon, funktioniert es nicht und man wundert sich, dass es nicht so funktioniert, wie man es sich vorgestellt hat!

Und genau das wird jedem früher oder später passieren – ein Semikolon ist schnell vergessen. Also nicht wundern, sondern nach fehlenden Semikola Ausschau halten! In den meisten Editoren werden Fehler im CSS farblich hervorgehoben – wenn also eine Zeile nicht so aussieht wie die anderen, könnte es am fehlenden Semikolon liegen (meist in der Zeile darüber).

Computer-Slang: damit man mit den korrekten Bezeichnungen um sich werfen kann (und auf Partys beeindrucken)

Was bisher mit „Für Wen“ und Eigenschaft-Wert-Kombination bezeichnet wurde, hat natürlich auch schöne Fachbegriffe. Die Bezeichnung für das „für Wen“ ist korrekt der Selektor – sprich auf was es sich bezieht. Später wird auch zwischen verschiedenen Arten von Selektoren unterschieden.

Unsere „Eigenschaft-Wert“-Kombination ist die Deklaration.

Vor dem ersten Test ...

Eigentlich will man natürlich sofort sein neues Wissen testen und z.B. die Welt bunt machen. Davor steht aber noch das Integrieren der CSS-Anweisungen in die HTML-Seite. Das wird im folgenden Kapitel gezeigt.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe