php-homepage.com

CSS (CSS3) in HTML einbinden

1) CSS mittels externem Stylesheet einbinden

externes Stylesheet in Html einbinden
der markierte Code bindet ein externes Stylesheet
in das betreffende Html-Dokument ein

Um ein externes Stylesheet .CSS in html einbinden zu können, muss man dies natürlich dem browser mitteilen.
Dies geschieht indem wir den link zu unserem externen stylesheet, zB. "style.css" im "head"-Bereich der Html Seite einbinden:
<link rel="stylesheet" type="text/css" href="style.css" />
Natürlich muss man bei dieser relativen Verlinkung aufpassen, unter welchen Pfad die Datei tatsächlich liegt.
href="style.css" würde bedeuten, die Datei "style.css" liegt im selben Verzeichnis/Ordner wie das Dokument, das es einbindet. Üblicherweise legt man für stylesheets aber ein eigenes Verzeichnis an, zB. /stylesheets. Man würde das css dann so einbinden:
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" />
Um xhtml/html5 konform zu arbeiten, schließen wir das "link-tag" mit einem backslash / am ende(bei html "nicht nötig")

2) CSS am Anfang des Html-Dokumentes einbinden

Styles direkt im Html
der markierte Code bindet Styles (Formatierungen)
im betreffenden Html-Dokument ein

Nicht immer ist es nötig, externe Stylesheets zu verwenden, deshalb kann es (zB. bei einzelnen Seiten ohne einheitlichen Design) einfacher sein,
die betreffenden Styles einfach am Anfang der Html-Seite einzubinden.
(Vorzugsweise zu beginn des "head" Bereichs.)
Die Syntax ist hier gleich wie bei externen Stylesheets.


3) CSS mittels inline-styles einbinden

inline-styles
der markierte Code zeichnet
das Html Element direkt im tag aus (inline)

Die manchmal einfachere weil direkte Auszeichnung von Elementen (Tags),
aber bei umfangreichen Seiten zu unübersichtlich. Auch nachträgliche Änderungen sind hier sehr aufwändig.
Inline-Styles sind nur in speziellen Fällen, etwa dem Überschreiben von externen stylesheets, empfehlenswert!
Auch findet hier keine Trennung von Inhalt und Design mehr statt, wie es eigentlich "sauberer" wäre!
Aufpassen auf die veränderte Syntax!