So fügen Sie CSS zu HTML hinzu
Wenn ein Browser ein Stylesheet liest, formatiert er das HTML-Dokument entsprechend den Informationen im Stylesheet.
Drei Möglichkeiten, CSS in HTML einzufügen
Es gibt drei Möglichkeiten, ein Stylesheet einzufügen:
- Externes CSS
- Internes CSS
- Inline-CSS
Externes CSS
Mit einem externen Stylesheet können Sie das Aussehen einer gesamten Website ändern, indem Sie nur eine Datei ändern!
Jede HTML-Seite muss einen Verweis auf die externe Stylesheet-Datei im <link>-Element im Kopfbereich enthalten.
Beispiel
Externe Stile werden im <link>-Element im <head>-Abschnitt einer HTML-Seite definiert:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>Das ist eine Überschrift</h1>
<p>Das ist ein Absatz.</p>
</body>
</html>
Try it Yourself »
Ein externes Stylesheet kann in jedem Texteditor geschrieben werden und muss mit der Erweiterung .css gespeichert werden.
Die externe .css-Datei sollte keine HTML-Tags enthalten.
Here is how the "mystyle.css" file looks:
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Hinweis: Fügen Sie kein Leerzeichen zwischen dem Eigenschaftswert und der Einheit ein:
Falsch (Leerzeichen): margin-left: 20 px;
Richtig (ohne Leerzeichen): margin-left: 20px;
Internes CSS
Ein internes Stylesheet kann verwendet werden, wenn eine einzelne HTML-Seite einen eindeutigen Stil hat.
Der interne Stil wird im <style>-Element im Kopfbereich definiert.
Beispiel
Interne Stile werden im <style>-Element im <head>-Abschnitt einer HTML-Seite definiert:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>Das ist eine Überschrift</h1>
<p>Das ist ein Absatz.</p>
</body>
</html>
Try it Yourself »
Inline-CSS
Ein Inline-Stil kann verwendet werden, um einen eindeutigen Stil für ein einzelnes Element anzuwenden.
Um Inline-Stile zu verwenden, fügen Sie das Stilattribut zum entsprechenden Element hinzu. Das style-Attribut kann eine beliebige CSS-Eigenschaft enthalten.
Beispiel
Inline-Stile werden innerhalb des „style“-Attributs des relevanten Elements definiert:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">Das ist eine Überschrift</h1>
<p style="color:red;">Das ist ein Absatz.</p>
</body>
</html>
Try it Yourself »
Tipp: Ein Inline-Stil verliert viele Vorteile eines Stylesheets (durch die Vermischung von Inhalt und Präsentation). Gehen Sie mit dieser Methode sparsam um.
Mehrere Stylesheets
Wenn einige Eigenschaften für denselben Selektor (Element) in verschiedenen Stylesheets definiert wurden, wird der Wert aus dem zuletzt gelesenen Stylesheet verwendet.
Nehmen Sie an, dass ein externes Stylesheet den folgenden Stil für das <h1>-Element hat:
h1 {
color: navy;
}
Nehmen Sie dann an, dass ein internes Stylesheet auch den folgenden Stil für das <h1>-Element hat:
h1 {
color: orange;
}
Beispiel
Wenn der interne Stil nach dem Link zum externen Stylesheet definiert wird, sind es die <h1>-Elemente "orange":
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Try it Yourself »
Beispiel
Wenn jedoch der interne Stil vor dem Link zum externen Stylesheet definiert wird, sind es die <h1>-Elemente "navy":
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Try it Yourself »
Kaskadierende Reihenfolge
Welcher Stil wird verwendet, wenn für ein HTML-Element mehr als ein Stil angegeben ist?
Alle Stile auf einer Seite werden nach den folgenden Regeln in ein neues „virtuelles“ Stylesheet „kaskadiert“, wobei Nummer eins die höchste Priorität hat:
- Inline-Stil (innerhalb eines HTML-Elements)
- Externe und interne Stylesheets (im Kopfbereich)
- Browser-Standard
Daher hat ein Inline-Stil die höchste Priorität und überschreibt externe und interne Stile sowie Browser-Standardeinstellungen.
CSS — So fügen Sie CSS zu HTML hinzu – W3Schools-Video
Dieses Video ist eine kurze Einführung zum Hinzufügen von CSS zu HTML.
Teil einer Reihe von Video-Tutorials zum Erlernen von CSS für Anfänger!
