CSS in HTML verwenden - intern oder externe css Datei

Mittels CSS kann die Auszeichnungssprache HTML genutzt und verändert werden. Dabei benötigt man die Definition, um CSS überhaupt anwenden zu können.

Für diesen Zweck gibt es 3 Möglichkeiten.

1. CSS intern in HTML definieren/einbinden

Vorteil:
Ideal für schnellen Test oder Programmierung eines Designs. Auch wenn ein durch PHP erzeugtes Script für eine Seite andere oder weitere Styles anbietet, ohne extra Datei zu definieren. (z.B. oft auch bei WordPress Eigenerweiterungen/Plugins)

Nachteil:
HTML Datei wird unnötig vergrößert, was die Übersicht etwas verlieren lässt.

Definition:
Im Bereich zwischen und kann der Style Tag verwendet werden.
<style type="text/css"><!--div{ boder:1px solid red; }--></style>


Im Beispiel wurde dem Div Element einen Rahmen gegeben. Die klassischen Anweisungen sind nicht zwingend Notwendig. Browser, die nicht erkennen, das es sich um eine Style-Anweisung handelt, würden sonst dies als Text ausgeben. Damit dies nicht passiert, werden die Style-Anweisungen mit einem HTML-Kommentar versehen. Unter CSS ist dies nicht üblich - Browser die es als Style erkennen, ignorieren dies dann auch korrekt. Die Angabe ist einfach empfohlen.

2. CSS intern direkt in einem HTML Element

Vorteil:
Schnelles programmieren und testen. Ideal auch für Elemente, die kein weiteres mal genau so angepasst werden.

Nachteil:
Vergrößert unnötig die HTML Datei. Sorgt für Spaghetti-Code, den man bei einem Designwechsel erschwert anpassen muss.

Definition:
Das Beispiel wird hier anhand eines DIVs gezeigt.
<div style="border: 1px solid red;">Beispiel</div>

3. CSS extern ausgelagert auf eine externe .css StyleSheet Datei

Vorteil:
Belastet den HTML Code nicht. Alle CSS Anpassungen liegen übersichtlich in dieser Datei. Bei einer Designänderung wird nur die style.css Datei verändert.

Nachteil:
Ungeeignet zum testen oder Aufbau eines Webdesigns.

Definition:
Die .css Datei wird zwischen und mittels Link-Meta-Angabe definiert.
So sieht es unter HTML/XHTML aus, wobei style.css die Textdatei ist, indem alle Style Eigenschaften den Elementen zugeordnet werden:

Unter XHTML wird dies mit einem /> abgeschlossen, da dieser Tag kein Inhalt aufweist, damit kein eigenen Endtag besitzt.