CSS ist eine Auszeichnungssprache für HTML. Sie ermöglicht es u.a., die verschiedenen Eigenschaften von HTML-Elementen zu verändern – zum Beispiel Farbe, Größe oder Position. CSS ist somit für die Gestaltung einer Website verantwortlich. Die CSS-Syntax arbeitet größtenteils mit sog. Rulesets sowie mit At-Rules.

CSS Regelsätze

Ein CSS-Regelsatz (Ruleset) besteht aus:

  1. einem Selektor (Selector) – mit dem das Objekt ausgewählt wird, das gestaltet werden soll – z.B. eine Überschrift
  2. und einer Deklaration (Declaration), die festlegt, was verändert werden soll. Diese besteht wiederum aus:
    • einer Eigenschaft (Property) – z.B. der Farbe
    • und einem Wert (Value)– z.B. Blau

Die Deklarationen werden in geschweiften Klammern zusammengefasst. Mehrere Deklarationen müssen durch ein Semikolon voneinander getrennt werden. Die letzte Deklaration benötigt eigtl. kein Semikolon mehr, aber es ist gängige Praxis dieses dennoch zu setzen.

selektor {
  eigenschaft: wert; 
  eigenschaft: wert; 
  eigenschaft: wert; 
}
Schematische Darstellung eines CSS-Regelsatzes mit Selektor, Deklaration, Eigenschaften und Werten
Schematische Darstellung eines CSS-Regelsatzes mit Selektor, Deklaration, Eigenschaften und Werten

Der folgende Code färbt eine Überschrift 1 blau ein und vergibt eine serifenlose Schriftart.

h1 {
  color: blue;
  font-family: sans-serif; 
}

CSS-Selektoren

Die Kunst bei CSS liegt u.a. darin, mit möglichst cleveren Selektoren genau die Elemente auf der Website anzusprechen, die verändert werden sollen. Es gibt sehr viele verschiedene CSS-Selektoren – also Möglichkeiten Objekte auszuwählen. Schlechte Selektoren sind oft zu ungenau. Das führt dazu, dass das Styling auch auf nicht erwünschte Objekte Auswirkungen hat.

Es gibt auch Selektoren, die zu genau – überspezifisch – sind. In diesem Fall funktioniert der Code zwar meist, aber er ist aufgebläht und schlecht zu warten. In diesem Zusammenhang ist das Thema CSS Spezifität sehr relevant.

Kommentare

Kommentare werden im CSS-Code mit /* Kommentar */ gekennzeichnet. Die Kommentare sind im CSS-Quellcode sichtbar.

/* Ich bin ein Kommentar. */

Vererbung

CSS-Eigenschaften werden auf Kind-Elemente im HTML-Code weitervererbt. Im nachfolgenden Beispiel werden sowohl die Überschrift <h1> als auch der Text <p> rot eingefärbt, da dem übergeordneten <div> die Eigenschaft für roten Text zugewiesen wurde.

<div>
  <h1>Headline</h1>
  <p>Hier steht ein wenig Text. </p>
</div>
div {
  color: red;
}

Best Practises für das Schreiben von CSS

Die offizielle Syntax von CSS ist das Eine – gut strukturierter Code nach »Industry Standards« das Andere. Um guten CSS-Code zu schreiben, solltet ihr euch daher auch mit den wichtigsten CSS Coding Guidelines vertraut machen.

Geschrieben von kulturbanause Team

Benutzerbild

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →