CSS-Syntax / Definition

Eine CSS-Regel hat folgendes Aussehen:

Selektor {
Eigenschaft-A: Wert-A;
Eigenschaft-B: Wert-B
}
/ Kommentar /

Ein Stylesheet darf beliebig viele solcher Regeln enthalten. Es gibt unter anderem folgende Selektoren, die jeweils Elemente auswählen. Im Wesentlichen sind dies die HTML-Tags:

Muster	Bedeutung
*	Selektiert jedes Element
E	Selektiert jedes Element vom Typ E
E F	Selektiert jedes Element F, das ein Nachfahre von Element E ist
E > F	Selektiert jedes Element F, das ein Kind von E ist
E:first-child	Selektiert ein Element E, wenn es das erste Kind des direkten Vorfahren ist
E[foo]	Selektiert jedes Element E, bei dem das „foo“-Attribut gesetzt ist (unabhängig vom Wert)
E[foo=bar]	Selektiert jedes Element E, bei dem das „foo“-Attribut mit dem Wert bar gesetzt ist
.c	Selektiert jedes Element der Klasse c
E.c	Selektiert alle Elemente E der Klasse c
#myid	Selektiert jedes Element mit der ID „myid“.
E#myid	Selektiert das Element E mit der ID „myid“.

Beispiel

p.note {
position: relative;
left: 15%;
width: 70%;
padding: 30px;
padding-bottom: 45px;
border: 1px solid black;
line-height: 1.5em;
color: black;
font-weight: bold;
text-align: justify;
background-color: #eeeeee
}

Ein mit dem p-Tag umgebener Absatz der Klasse „note“ wird dadurch von einem CSS-kompatiblen Browser wie folgt dargestellt:

Textabsatz, der so formatiert ist, wie obiges CSS es vorgibt.

Hier wird der Deklarationsbereich allen p-Elementen zugewiesen, die das class-Attribut mit dem Wert note besitzen. Würde man das p im Selektor weglassen, würden alle Elemente der Klasse note betroffen sein, beim Weglassen des .note alle p-Elemente.

Ein wichtiges Prinzip von CSS ist die Vererbung der Eigenschaftswerte an untergeordnete Elemente und die Kombination verschiedener Stylesheets (Kaskade). Diese können dabei aus verschiedenen Quellen stammen: vom Autor des Stylesheets, dem Browser (User Agent) oder dem Benutzer.