Eine Regel oder ein „Regel-Set“ ist eine Anweisung, die Browsern mitteilt, wie sie bestimmte Elemente einer HTML-Seite darstellen sollen. Ein Regel-Set besteht aus einem Selektor gefolgt von einem Deklarationsblock.
Ein Selektor wählt Elemente aus einer HTML-Seite aus (er „selektiert“), die von dem Regel-Set beeinflusst werden sollen. Der Selektor besteht aus allem bis zu (aber nicht inklusive) der ersten geschweiften Klammer. Beispielsweise:
h1 { color: blue; margin-top: 1em; }
p { padding: 5px; }
td { background-color: #ddd; }
Der Deklarationsblock ist ein Container der aus allem zwischen (und inklusive) der geschweiften Klammern besteht. Leerraum innerhalb eines Deklarationsblocks wird ignoriert – so können diese Regeln nach eigener Vorliebe formatiert werden. Beispielsweise:
h1 { color: blue; }
p { padding: 5px; }
td { background-color: #ddd; }
Oder mit Leerraum, um die Lesbarkeit zu erhöhen:
h1
{
color: blue;
}
Die Deklaration teilt dem Browser mit, wie es alle selektierten Elemente darstellen soll. Eine Deklaration besteht aus einer Eigenschaft und dem zugehörigen Wert, getrennt werden diese durch den Doppelpunkt „:“. Auch wenn es nicht zwingend erforderlich ist, nach einer einzelnen Deklaration ein Semikolon anzufügen, wird dennoch empfohlen, die letzte Deklaration eines Blockes mit einem Semikolon abzuschließen. Beispielsweise:
h1 { color: blue; }
Die Eigenschaft ist der Bereich des Elementes, dessen Aussehen man beeinflussen möchte. Innerhalb einer Deklaration kann nur eine Eigenschaft vorhanden sein. Beispielsweise:
p { padding: 5px; }
Dieses ist der Wert, den man der Eigenschaft zuweisen möchte. Beispielsweise:
p { padding:5px; }