CSS lernen - Den CSS-Syntax verstehen und korrekt umsetzen

Der CSS-Syntax im Detail

Eine CSS-Regel besteht aus zwei Hauptteilen, einem Selektor und einer oder mehreren Deklarationen:

Der Selektor gibt an, für welches Element in der HTML-Seite die CSS-Regel gilt.

die Deklarationen innerhalb des Blocks bestimmen, wie die Elemente auf einer Webseite formatiert werden. Jede Deklaration besteht aus einer Eigenschaft und einem Wert, die durch einen Doppelpunkt (:) getrennt sind und mit einem Semikolon (;) enden. Deklarationsgruppen sind von geschweiften Klammern umgeben {}.

Die Eigenschaft ist das Stilattribut, das Sie ändern möchten. Dies kann z.B. eine Schriftart, eine Farbe oder ein Hintergrund sein. Jede der Eigenschaften hat einen Wert. So kann die Eigenschaft "Farbe" zum Beispiel den Wert "blue" haben.

h1 { Farbe : blau ; text-align : center ;}

Damit das ganze dann lesbarer zu machen, sollten CSS Deklarationen immer in einzelne Zellen geschrieben werden.

Zum Beispiel:

              
h1 {
    color: blue;
    text-align: center;
}               
              
            

Im obigen Beispiel ist also h1 der Selektor. color und text-align die CSS-Eigenschaften und die dazugehörigen Werte sind blue und center.

Kommentare in CSS schreiben

Kommentare werden normalerweise hinzugefügt, um den Quellcode leichter verständlich zu machen. Es kann anderen Entwicklern (oder Ihnen in Zukunft beim Bearbeiten des Quellcodes) helfen, zu verstehen, was Sie mit dem CSS erreichen wollten. Kommentare sind für Programmierer wichtig, werden aber von Browsern ignoriert.

Ein CSS-Kommentar beginnt mit /*und endet mit */, wie im folgenden Beispiel gezeigt:

         
/* Dies ist ein Kommentar */
h1 {
    color: blue;
    text-align: center;
}
/* Und das ist ein Kommentar, 
der mehrere Zeilen hat */
p {
    font-size: 18px;
    text-transform: uppercase;
}
        
        

Sie können auch einen Teil Ihres CSS-Codes zu Debugging-Zwecken auskommentieren, wie hier gezeigt:

Beispiel:

        
        h1 {
    color: blue;
    text-align: center;
}
/*
p {
    font-size: 18px;
    text-transform: uppercase;
}
*/

Groß- und Kleinschreibung in CSS

Bei CSS-Eigenschaftsnamen und vielen Werten wird die Groß- und Kleinschreibung nicht beachtet. Während CSS-Selektoren normalerweise die Groß-/Kleinschreibung beachten, ist der Klassenselektor .maincontent beispielsweise nicht identisch mit .mainContent.

Daher sollten Sie sicherheitshalber davon ausgehen, dass bei allen Komponenten von CSS-Regeln die Groß-/Kleinschreibung beachtet wird.

Im nächsten Kapitel lernen wie die verschiedenen Arten von CSS-Selektoren kennen.