php-homepage.com

CSS (CSS3) in HTML einbinden

CSS Einbinden - Möglichkeiten

1)CSS mittels externem Stylesheet einbinden

CSS 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 href="style.css" type="text/css" media="screen" />
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 bzw. html5 konform zu arbeiten, schließen wir das "link-tag" mit einem Backslash / am Ende(bei HTML "nicht nötig").

Das Media Attribut habe ich aus aktuellem Anlass auch mitgenommen, ist aber für das Kapitel "CSS in HTML einbinden" nicht nötig. Mehr zu den Media Queries.

2) CSS am Anfang des Html-Dokumentes einbinden

Styles in HTML einbinden

Nicht immer ist es nötig, externe Stylesheets zu verwenden, deshalb kann es (zB. bei einzelnen Seiten ohne einheitlichem Design) einfacher sein,
die betreffenden Styles einfach am Anfang der HTML-Seite mittels des style-tags einzubinden.
<style>
h1 {color:red;}
p {color:blue;}
</style>
(Vorzugsweise nach den meta-tags zu Beginn des "head" Bereichs.)
Die Syntax innerhalb der style-tags ist hier gleich wie bei externen Stylesheets.

Diese Vorgehensweise empfiehlt sich nur bei bei Webseiten mit wenigen Dokumenten oder wenn man nur das Layout bzw. Design einzelner Dokumente ändern will. Der Verwaltungsaufwand bei nachträglichen Anpassungen kann sonst enorm werden:)

3) Inline Styles

HTML inline styling

Der markierte Code zeichnet das HTML-Element direkt im tag aus (inline). <h1 style="color:red" >Überschrift</h1>

Die manchmal einfachere, weil direkte Auszeichnung von Elementen (Tags),
ist 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!
Mehrere Attribute können kommasepariert angeführt werden.

Kommentar hinzufügen

* Pflichtfeld
1000

Kommentare (0)

Noch keine Kommentare, sei der erste Poster!