Im folgenden Tutorial werde ich die verschiedenen Möglichkeiten CSS einzubinden beschreiben. Vorrausgesetzt sind html- Grundkenntnisse
1. direktes Formatieren in einem html-sheet
um css direkt auf eienn html- sheet anzuwenden verwendet man folgenden Befehl:
<h1 style="color:#0000FF;"> Überschrift </h1>
Hier wird zunächst einmal eine Überschrift angelegt (h1). mit dem Tag style beginnt man eine css-formatierung. Das folgende color gibt die Farbe der Überschrift an.
Grundsätzlich muss man also sagen:
<html Befehl style="Css-Formatierung;">.....</html Befehl>
2. Datei-Formatierung im Kopf-Bereich
Möchte man eine CSS-Formatierung im Kopf einer html Seite festlegen, so sieht das folgendermaßen aus:
<style type="text/css"> // legt den Beginn der CSS-Formatierung fest
<!--
p {font family:Arial: }
// Formatierung aller mit dem Tag <p> beginnenden Absätze; hier wird die Schriftart auf Arial festgelegt
//-->
</style> // Ende CSS-Formatierung
3. Datei-Formatierung in einer externen DAtei
Um eine CSS-Formatierung in einer externen Datei vorzunehmen verwendet man folgende Befehle:
<style type="text/css"> Beginnd er CSS-Formatierung
<!--
@import url(sheets.css);
// Import von CSS-Befehlen aus der Datei sheets.css. Die Datei ist selbstverständlich beliebig zu benennen, nur .css ist festgeschrieben. In der externen Datei erfolgen die Befehle nach folgenden Muster:p {font family:Arial: } dies ist nur ein Besipiel; es wird oben erklärt.
//-->
</style> // Ende der CSS-Formatierung
Andere Möglichkeit der externen CSS-Einbindung:
<link rel="stylesheet" type="text/css" href="sheets.css">
Importiert die Formatierungsbefehle aus der Datei sheets.css; die externe datei muss so aussehen wie oben beschrieben.
Ich hoffe mein Tutorial konnte euch helfen. Bei Fragen schickt bitte eine mail an martin.paschmann@onlinehome.de