CSS-002

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>