CSS in HTML einbinden

Cascade Style Sheets in HTML einbinden heißt, den HTML-Tags Formatierungen zuweisen.
Die Syntax ist dabei immer in etwa gleich:

1. Den Tag angeben, der Formatierungen erhalten soll
2. Die Formatierungsanweisung in geschweiften Klammern angeben
3. Die Formatieroption nach einem Doppelpunkt hinzufügen
4. mehrere Formatierungsanweisungen durch Semikolon trennen.

Beispiel: Dem Überschrift-Tag h1 die Textfarbe rot zuordnen und fett als Schriftauszeichnung wählen.
h1 { color:red; font-weight:bold }


Es gibt 5 Möglichkeiten den Ort der Einbindung festzulegen.
In den nachfolgenden Beispielen werde ich Ihnen alle 5 Möglichkeiten aufzeigen.
Bei allen 5 Beispielen wird dabei die Textfarbe eines oder mehrerer Absätze auf rot gesetzt.

Methode 1: Einbinden in einem HTML-Tag
Syntax: <p style="color:red">Der Text im Absatz</p>
Es ist nur der Absatz betroffen, in dem die Style Zuweisung eingefügt wurde.
Im Eröffnungs-TAG wird die Formatierungsanweisung eingebunden.

 

Methode 2: Einbinden im HEAD-Bereich der HTML-Datei
Syntax:
<head>
<style type="text/css">
p { color:red }
</style>
</head>

Es sind davon alle Absätze im Dokument betroffen!

Geöffnet wird CSS mit dem Style-TAG. Dabei wird der Type als text/css festgelegt.
Danach kommen die Formatierungsanweisungen. Die Syntax ist dabei immer gleich.
Der TAG, dem die Formatierung zugewiesen werden soll,
eine öffnente, geschweifte Klammer, die Formatierungsanweisung, danach ein Doppelpunkt,
dann die Formatierungsoption. Es können auch mehrere Anweisungen durch ein Semikolon getrennt
eingegeben werden. Nach Beendigung der Anweisung wird die geschweifte Klammer wieder geschlossen.

 

Methode 3: Einbinden im HEAD als Unterklasse
Syntax:
<style type="text/css">
p.absatz1 { color:red }
</style>

Syntax im Absatz:
<p class="absatz1">Dieser Text bekommt dadurch die Formatierungszuweisungen von p.absatz1</p>
Es ist nur der Absatz betroffen, dem die Unterklasse (hier absatz1 ) zugeordnet wurde.
Im Stylebereich wurde die Unterklasse durch p.absatz1 erzeugt. p steht für Absatz, der Punkt sagt: jetzt folgt
eine Unterklassendefinition, der Name nach dem Punkt ist dann frei festlegbar.
Im Absatz, der nun diese Formatierungen erhalten soll, muss nun der Name als Klasse eingefügt werden:
<p class="Name_der_Klasse". Damit haben Sie die Möglichkeit, mehrere Absätze, aber auch andere Tags wie
<DIV> oder <SPAN> mit unterschiedlichsten Formaten zu versehen.

 

Methode 4: Einbinden im HEAD als Pseudoklasse
Syntax:
<style type="text/css">
#meinabsatz { color:red}
</style>

Synatx im zu formatierenden TAG:
<p id="meinabsatz">Dieser Text bekommt dadurch die Formatierungszuweisungen von #meinabsatz</p>
Es ist nur der Absatz betroffen, dem das Pseudoformat ( hier #meinabsatz ) zugeordnet wurde.
Im Stylebereich wurde das Pseudoformat mit #meinabsatz erzeugt. Wichtig! Das #-Zeichen vor dem freidefinierbaren Namen.
Im zu formatierenden TAG wird diese Formatierung durch id="Name des Pseudoformats" eingebunden.

 

Methode 5: Einbinden der Formatierungen in einer externen Datei.
Syntax im Headbereich:
<link rel="stylesheet" type="text/css" href="URL der Datei">

Syntax in der Datei:
p.absatz1             { color:red; font-familiy:arial, serif; font-weight:bold }
div.allgemein      { margin:top:2cm; margin-left:2.5cm }

Im Headbereich wird der Ort und die Art der externen Datei festgelegt.
In der Datei, die die Dateinamenserweiterung .css  haben sollte, werden nun die Formatierungen der
einzelnen TAGS definiert. Dabei wird auf den  STYLE-TAG verzichtet!