Stylesheets in HTML einbinden
in CSS · Autor: Sebastian Fuchs
Es gibt mehrere Möglichkeiten, Cascading Style Sheets (kurz: CSS) in HTML Dokumente einzubinden.Meistens wird eine separate ".css"-Datei angelegt, in der alle Formate definiert werden, die für die ganze Seite gelten sollen. So muss man nicht immmer wieder alles neu definieren für verschiedene Seiten.
Diese Datei wird im <head>-Bereich des HTML-Dokuments angegeben über einen <link>-Tag angegeben:
[...]
<head>
<title>Testseite</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
[...]
Durch diesen Befehl wird die Datei "styles.css", in der wir unsere Formate definieren, geladen und die Eigenschaften auf dieser Seite angewendet.<head>
<title>Testseite</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
[...]
Mit der type-Angabe text/css weiß der Client, dass es sich um eine ".css"-Datei handelt.<br />
Des weiteren können wir über den <style>-Tag dateispezifische Formate definieren, die dann nur für die aktuelle Datei gelten.
Alle Angaben die hier gemacht werden, gelten "vor" denen aus der hinzugeladenen Datei (falls verwendet). Wenn z.B. in der "styles.css" eine Schriftfarbe von #FFFFFF angebeben ist, in dem Dokument aber eine von #000000, wird letzere angewendet.
[...]
<head>
<title>Testseite</title>
<style type="text/css">
body {
text-align: center;
font-size: 13px;
font-family: "Verdana", sans-serif;
}
</style>
</head>
[...]
Eine weitere Möglichkeit besteht darin, die Formate innerhalb des HTML-Dokuments direkt auf bestimmte Elemente anzuwenden. Dabei wird dem jeweiligen Element mithilfe des style-Attributs weitere Eigenschaften zugewiesen.<head>
<title>Testseite</title>
<style type="text/css">
body {
text-align: center;
font-size: 13px;
font-family: "Verdana", sans-serif;
}
</style>
</head>
[...]
Auf diese Weise lassen sich im Prinzip alle HTML-Elemente anpassen und formatieren.
Hier gilt wie bereits zuvor, dass diese Eigenschaften eine höhere Priorität als die aus dem <head>-Bereich besitzen. Im Grunde herrscht eine Hierachie von oben nach unten, und die jeweils untersten Formate werden angewendet.
<span style="color: #000000; text-align: right; font-size: 11px;">Text</span>
oder auch
<a href="seite.html" style="color: #FF0000;">Link</a>
oder auch
<a href="seite.html" style="color: #FF0000;">Link</a>
· zurück zu "CSS Tutorials"
