Recht einfach ist der Syntax in CSS gehalten. Doch diese Theorie ist sehr wichtig, um gleich erfolgreich mit CSS positive Ergebnisse zu erfahren. Was die Syntax genau ist und wie das System funktioniert, erfährst du in diesem Anfänger-Artikel zur Artikelserie CSS Grundlagen.

Artikel Index

  1. Syntax Aufbau
  2. Der Selektor
    - 2.1 HTML Element direkt ansteuern
    - 2.2 ID ansteuern (einmalige ID)
    - 2.3 CLASS ansteuern (arbeiten mit CSS Klassen)
  3. Mehrere Klassen nutzen
    3.1 ID und Klassen Mix
  4. Mehrere Selektoren

Was heißt eigentlich Syntax?

Unter Syntax verstehen wir den sprachlichen Aufbau einer Programmiersprache. Die Eingaben die wir dem Computer (Engine bzw. Browser) geben, muss natürlich von diesem auch ausgewertet werden. Das ganze geht natürlich nur innerhalb Programmeigener Richtlinien.
Die Richtlinie ist also unser Syntax, den man beherschen muss, damit das Programm das tun was man auch von diesem möchte.
Um in CSS zu sprechen: Wenn die gegebenen Elemente zum Ansteuern mit dessen Eigenschaften und Werten so sind, das diese korrekt gelesen werden können, sieht unser Webdesign nachher auch korrekt aus.

Der CSS Syntax

…ist recht einfach aufgebaut und hier reichen ein paar Bausteine zu zeigen, damit man dahinter kommt und es versteht.

Natürlich lernt das CSS lernen gar nichts, wenn man nicht in HTML vertraut ist. Du solltest dir also vorher die wichtigsten Dinge von HTML lernen, bevor du in CSS erfolgreich starten kannst.

1. Das erste Beispiel – Aufbau / Syntax

Selektor
{
Eigenschaft : Wert ;
}

Verwendete Zeichen

Die geschweifte Klammer { und } machst du mittels [Alt Gr] und [7] für { und [Alt Gr] und [0] (Null) für }.
Innerhalb dieser Klammern steht der eigentliche Quellcode, der interpretiert werden soll. Und zwar immer auf das angegebene “HTML” Element, welches vor der Klammer steht. Unser Selektor!

Eigenschaft beinhaltet eine CSS-Eigenschaft, welche angewendet werden soll. Beispielsweise um einen Rahmen zu ermöglichen, Hintergrundfarben zu nutzen oder um Bilder in ein Element einzufügen.
Der Wert enthält dann die Wertübergabe der Eigenschaft, welche immer anders sein kann. Hier kann bei der Eigenschaft für Farbe dann z.B.: Rot oder Blau zugewiesen werden.
Am Ende folgt ein Simikolon ; welches das Ende einer Codezeile / Anweisung zeigt. Danach bzw. darunter kann dann eine weitere Eigenschaft mit Wert hinzu kommen.

Die Schreibweise kann abweichen

Es gibt in jeder Programmiersprache unterschiedlich mögliche Schreibweisen. Unter anderem um die Übersichtlichkeit zu verbessern. Jeder Programmierer macht das sozusagen anders. Das ist aber keine Abweichung gegen den Syntax! Das zeige ich dir in nachfolgenden Beispielen

So:

selektor{
Eigenschaft : Wert ;
}

oder auch so:

selektor{ Eigenschaft : Wert ; }

Leerzeichen sind aber auch kein Thema! Ebenso wenig wie Tabs:

selektor
{
Eigenschaft: Wert;
Eigenschaft: Wert;
}

Du kannst dir selbst einen passenden Stil angewöhnen bzw. findest diesen nach einiger Zeit selbst.

2. Der Selektor

Der Selektor bezieht sich auf das zu bearbeitende HTML Element. Das können aber auch ID’s oder CLASS’s sein, welche einem Element zugewiesen wurden.

Hier ein kleines Beispiel, wie wir 3 verschiedene HTML-Elemente ansteuern können.

HTML:

<span>Ein schöner Text!</span>
Ein weiterer schöner Text!

 

Und noch mehr schöner Text!

Wir haben 2 verschiedene HTML-Elemente mit Text. Einmal ein <span> Element und zwei <div> Elemente. Eines davon hat eine ID, das andere eine CLASS.

CSS:

span
{
font-weight: bold;
}
#test1
{
color: red;
}
.test2
{
color: blue;
}

HTML Element direkt ansteuern (<span>)

Wie haben 3 mögliche Selektoren. Einmal können wir direkt das HTML Element ansteuern, so wie wir es bei dem <span> getan haben. Wir schreiben in unsere CSS dazu einfach nur “span”.

Im Gegensatz zur ID und CLASS haben direkte HTML Element-Ansteuerungen kein Vorzeichen. Es bezieht sich dann auf all diese Elemente.

Wichtig:
Hierbei werden dann alle verwendeten <span> Elemente auf einer Webseite angetaktet. Das ist der Vor- aber auch Nachteil dieser Methode.

ID ansteuern (<div id=”test1″></div>)

Dann haben wir die ID. Wir haben diese in der CSS einfach mit “#test1″ angetaktet. Eine ID bekommt immer die Raute zur Ansteuerung innerhalb der CSS als Vorzeichen. Somit weiß man, es handelt sich um eine ID.
Eine ID darf nur einmal zugewiesen werden, welche den gleichen Namen enthält. Für unser “test1″ gilt nun, es ist einmalig vorkommend.

CLASS ansteuern (<div class=”test2″></div>)

Klassen sind mehrfach verwendbar. Im Gegensatz zur ID können diese nochmalig im HTML Bereich der Webseite angesteuert werden. Das ist gut, um Platz in der CSS Datei zu sparen und um mehr Übersichtlichkeit zu ermöglichen.
Eine Klasse erhält immer einen Punkt als Vorzeichen. (.) Damit sieht jeder in der CSS gleich, es handelt sich um eine Klasse.

3.  Mehrere Klassen verwenden

Es ist möglich, mehrere Klassen anzusteuern. Dies sieht wie folgt aus:

HTML:

Mein Text

CSS:

.test2{
color: red;
}
 
.test3{
background-color: grey;
}
 
.test4{
border: 1px solid #000000;
}

Mehrere Klassen kannst du per Leerzeichen einfach in den HTML-Quelltext schreiben. Damit kannst du für jede Klasse nur ein paar wichtige Codes in der CSS definieren. Dieses Verfahren wird dazu genutzt, um nur einigen Elementen etwas zuzuweisen, was andere nur Teilweise ebenfalls “können” sollen.

Im Beispiel haben wir 3 CSS Definitionen für die drei verschiedenen Klassen geschrieben. In anderen HTML Elementen könnte man nur eine oder zwei Klassen verwenden.

Ein Beispiel aus der Praxis:
In einem Menü soll jeder Button gleich aussehen. Aber der erste und der letzte soll abgerundet sein. Jetzt könnte man eine Klasse für das Aussehen der Buttons erstellen und zwei weitere für den rechten und linken Button. Nun bekommen alle Buttons die eine Klasse für das Aussehen. Der linke und der rechte jedoch zusätzlich seine eigene Klasse.

ID und Klassen Mix

Es ist möglich, einem Element eine ID und eine oder mehrere Klassen zuzuweisen. Das könnte so aussehen:

HTML:

Ein wenig Text

Somit haben wir dem Element eine feste ID zugewiesen, nämlich den Namen “element1″. Dann auch noch zwei Klassen “rahmen” und “hintergrund”.

4. Mehrere Selektoren

Es ist möglich, mehrere Selektoren zu verwenden. Ich zeige dazu zwei verschiedene CSS Beispiele:

CSS – Beispiel 1 – Verschachtelung:

.element1 p
{
color: blue;
}

CSS – Beispiel 2 – Auflistung:

.element1, .element2, .element3
{
color: blue;
}

Erläuterung der Beispiele

Beispiel 1 – Verschachtelung
Verschachtelungen sind sehr häufig genutzt, um direkt Elemente innerhalb anderer Elemente anzusteuern. Beispielsweise alle Links innerhalb der Menüleiste.
In der CSS Datei werden solche Verschachtelungen sehr logisch angebaut, welches HTML Element in welchem anderen liegt. Getrennt werden diese per Leerzeichen notiert!

Beispiel 2 – Aufzählung/Auflistung
Sollen mehrere Elemente, egal ob ID, CLASS oder direkte HTML Elemente, alle eine CSS Style Sheet Definition erhalten, trennt man diese per Komma.
Sozusagen bekommt dann jedes Element die CSS Definition angewendet.

Fazit

Der Syntax ist recht einfach und schnell erlernbar. Man sollte nur die unterschiedlichen Typen in CSS ersteinmal verstehen. Unter anderem sind das die Selektoren, welches wohl das schwerste daran für Anfänger in CSS sein wird. Besser in die Materie kommst du vielleicht durch das selbst-probieren in der Praxis.

GD Star Rating
loading...