Stile im Dokument

Inline-Stile funktionieren, aber stell dir vor, alle Absätze einer Seite sollen grün sein. Du müsstest jedem Absatz dasselbe Attribut style geben, und wenn du deine Meinung änderst, müsstest du jeden einzelnen wieder ändern.

Deshalb gibt es in CSS Regeln. Eine Regel sagt, welche Elemente wie gestaltet werden. Sie beginnt mit einem Selektor, der die Elemente auswählt, gefolgt von Deklarationen in geschweiften Klammern:

li {
	color: orange;
	text-align: center;
}

Der Selektor li wählt alle li-Elemente der Seite aus, diese Regel macht also alle Listeneinträge orange und zentriert. Die Deklarationen sind dieselben wie im Attribut style. Üblich ist, jede Deklaration in eine eigene, eingerückte Zeile zu schreiben und jede mit einem Semikolon abzuschließen, auch die letzte.

Die zweite Möglichkeit, CSS in eine Seite einzufügen, ist, Regeln in das Element style zu schreiben. Es kommt in head, weil es nicht zum Inhalt der Seite gehört, sondern eine Information darüber ist, wie sie dargestellt wird:

<head>
	<meta charset="utf-8">
	<title>Hauskatze</title>
	<style>
		li {
			color: orange;
		}
	</style>
</head>