CSS einbinden
Es gibt verschiedene Möglichkeiten CSS in eine Homepage einzubinden. Diese werden im Folgenden beschrieben:
Eine CSS-Datei einbinden
In einem Dokument eines Texteditors (z.B. Notepad++) werden verschiedene CSS-Anweisungen aufgeschrieben. Dieses Dokument wird schließlich als CSS-Datei (Dateiendung .css) gespeichert (z.B. style.css). Im Head-Bereich der Webseite kann dieses Dokument nun wie folgt eingebunden werden:
<head>
<link href="style.css" />
</head>
Ähnlich wie beim <a>-Tag wird über das Attribut "href" ein Link angegeben, der auf das CSS-Dokument verweist. Das Dokument wird schließlich eingebunden und die CSS-Anweisungen im Dokument auf der Webseite angewendet.
Direkte CSS-Anweisung in einem Style-Element
Innerhalb des heads kann ein weiteres Element eingefügt werden: das <style>-Element. Zwischen Start- und Endtag dieses Elements können wie gewohnt CSS-Anweisungen geschrieben werden, die von der Webseite umgesetzt werden.
<head>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Ich bin eine Überschrift</h1>
</body>
CSS-Anweisung als Attribut
Eine CSS-Anweisung kann direkt "in" einem HTML-Element festgelegt werden. Dazu fügt man dem HTML-Element ein Attribut zu namens "style". Mit einem Gleichzeichen und innerhalb von Anführungszeichen können dann wie gewohnt die CSS-Anweisungen geschrieben werden. Hierbei ist kein Selektor und keine geschweiften Klammern nötig, da sich die CSS-Anweisungen lediglich auf das jeweilige HTML-Element beziehen.
<h1 style="color:red;">Ich bin eine Überschrift</h1>
