CSS-Verwendung
Fügen Sie Stile per Inline-, interner oder externer Methode hinzu. Erfahren Sie, wann und wie Sie jede Variante einsetzen.
CSS steuert, wie ein HTML-Dokument aussieht, aber der Browser muss wissen, wo er die Stilregeln findet. Es gibt drei Möglichkeiten, CSS an eine HTML-Seite anzuhängen, und jede eignet sich für eine andere Situation:
- Inline-Stil — die Regeln werden direkt auf ein einzelnes Element mit dem Attribut
stylegeschrieben. - Interner (eingebetteter) Stil — die Regeln werden in einem
<style>-Element im<head>-Abschnitt der Seite gesammelt. - Externer Stil — die Regeln werden in einer separaten
.css-Datei gespeichert und von der Seite verlinkt.
Diese Seite behandelt alle drei Methoden, wann man auf welche zurückgreift und wie sie zusammenwirken, wenn mehr als eine davon dasselbe Element anspricht. Falls Sie neu darin sind, wie eine CSS-Regel aufgebaut ist (Selektor, Eigenschaft, Wert), lesen Sie zunächst CSS-Syntax.
Inline-Stil
Ein Inline-Stil wird direkt auf ein Element mit dem Attribut style geschrieben. Die Regeln gelten nur für dieses eine Element. Das Attribut enthält eine oder mehrere Deklarationen (Eigenschaft: Wert), die durch Semikolons getrennt sind — ein Selektor und geschweifte Klammern werden nicht benötigt, da das Element, auf das die Regel angewendet wird, dasselbe ist, auf dem sie steht.
Wann verwenden: für schnelle einmalige Anpassungen oder für dynamisch erzeugte Stile (z. B. durch JavaScript). Vermeiden Sie ihn für allgemeines Styling — da die Regel am Element selbst sitzt, lässt sie sich nicht wiederverwenden, und die Pflege über eine große Seite hinweg ist aufwändig.
Beispiel für einen Inline-Stil in einem HTML-Dokument:
CSS Inline-Stil-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2 style="color:#1c87c9">Some heading</h2>
<p style="color:#8ebf42; font-size:15px">Some paragraph</p>
</body>
</html>Ergebnis
Schauen wir uns das Beispiel an. Beim Tag <h2> haben wir style="color:#1c87c9" geschrieben, sodass der Text dieser Überschrift in der blauen Farbe #1c87c9 dargestellt wird.
Dasselbe haben wir beim Tag <p> mit style="color:#8ebf42; font-size:15px" gemacht. Die beiden Deklarationen sind durch ein Semikolon getrennt: Der Text zwischen dem öffnenden <p>- und dem schließenden </p>-Tag wird in #8ebf42 (Grün) eingefärbt und auf 15px gesetzt.
Interner Stil
Bei einem internen (oder eingebetteten) Stil befindet sich das CSS für eine Seite in einem <style>-Element im <head> der Seite. Anders als bei Inline-Stilen schreibt man hier vollständige Regeln — einen Selektor gefolgt von einem Deklarationsblock in geschweiften Klammern — sodass eine Regel viele Elemente gleichzeitig ansprechen kann.
Wann verwenden: für eine einzelne Seite, die ein eigenes Styling benötigt und nicht mit dem Rest der Website geteilt wird, oder für schnelles Prototyping. Der Nachteil ist, dass die Regeln nur diese eine Seite betreffen. Um mehrere Seiten gleich zu gestalten, müsste man den <style>-Block in jede von ihnen kopieren — genau das Problem, das externe Stylesheets lösen.
Im folgenden Beispiel färbt die body-Regel den Seitenhintergrund #1c87c9 (Blau) und die p-Regel macht den Absatztext weiß.
Beispiel für einen internen Stil in einem HTML-Dokument:
CSS Interner Stil-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #1c87c9;
}
p {
color: white;
}
</style>
</head>
<body>
<p>Some information</p>
</body>
</html>Externer Stil
Ein externes Stylesheet hält das gesamte CSS in einer eigenen Datei, getrennt vom HTML. Dies ist der Standardansatz für echte Websites, da jede Seite dieselbe Datei verlinken und ein einheitliches Erscheinungsbild teilen kann. Sie können die Datei mit einem beliebigen Text- oder HTML-Editor wie Notepad oder Sublime Text erstellen.
Die Datei enthält nur CSS — keine HTML-Tags — und wird mit der Erweiterung .css gespeichert. Um sie an eine Seite anzuhängen, fügt man ein <link>-Tag im <head>-Abschnitt ein. Jede Seite, die diese Stile verwenden soll, benötigt ein eigenes <link>.
Wann verwenden: fast immer bei einer mehrseitigen Website. Da die Regeln an einem einzigen Ort liegen, aktualisiert die Änderung einer Farbe oder Schrift in dieser einen .css-Datei sofort alle Seiten, und der Browser kann die Datei cachen, sodass sie nur einmal heruntergeladen wird.
Beispiel für einen externen Stil in einem HTML-Dokument:
CSS Externer Stil-Beispiel
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>Eine passende style.css-Datei könnte so aussehen:
body {
background-color: #1c87c9;
}
p {
color: white;
}Welche Methode sollten Sie verwenden?
Als Faustregel gilt:
- Verwenden Sie ein externes Stylesheet für nahezu alle realen Projekte — es ist wiederverwendbar, cachebar und einfach zu pflegen.
- Verwenden Sie interne Stile für eine einzelne Seite oder einen schnellen Demo-Entwurf.
- Verwenden Sie Inline-Stile nur für eine einzelne Anpassung, die sich nicht anders ausdrücken lässt (häufig ein dynamisch berechneter Wert).
Zusammenwirken der Methoden
Wenn dasselbe Element von mehr als einer Methode angesprochen wird, muss der Browser entscheiden, welche Deklaration gewinnt. Unter sonst gleichen Bedingungen gilt folgende Prioritätsreihenfolge:
- Inline-Stile (höchste Priorität).
- Interne und externe Regeln, entschieden durch Selektor-Spezifität und, bei gleicher Spezifität, durch die Regel, die zuletzt erscheint.
Ein Inline-style="color:red" überschreibt also eine p { color: blue; }-Regel aus einem Stylesheet. Dieses Prioritätssystem wird Kaskade genannt — das „C" in CSS.