So fügen Sie CSS hinzu
Wenn ein Browser ein Stylesheet liest, formatiert er das HTML-Dokument gemäß den Informationen im Stylesheet.
Drei Möglichkeiten zum Einfügen von CSS
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 innerhalb des <link>-Elements innerhalb des Head-Abschnitts einen Verweis auf die externe Stylesheet-Datei enthalten.
Beispiel
Externe Stile werden innerhalb des <link>-Elements innerhalb des <head>-Abschnitts einer HTML-Seite definiert:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
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.
So sieht die Datei "mystyle.css" aus:
"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 (kein Leerzeichen):margin-left: 20px;
Internes CSS
Ein internes Stylesheet kann verwendet werden, wenn eine einzelne HTML-Seite einen einzigartigen Stil hat.
Der interne Stil wird innerhalb des <style>-Elements innerhalb des Head-Abschnitts definiert.
Beispiel
Interne Stile werden innerhalb des <style>-Elements innerhalb des <head>-Abschnitts einer HTML-Seite definiert:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline-CSS
Ein Inline-Stil kann verwendet werden, um einen einzigartigen Stil für ein einzelnes Element anzuwenden.
Um Inline-Stile zu verwenden, fügen Sie dem relevanten Element das Stilattribut 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;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Tipp: Ein Inline-Style verliert viele der Vorteile eines Stylesheets (durch Mischen von Inhalt und Präsentation). Verwenden Sie diese Methode sparsam.
Mehrere Stylesheets
Wenn einige Eigenschaften für denselben Selektor (Element) in verschiedenen Stylesheets definiert wurden, wird der Wert aus dem zuletzt gelesenen Stylesheet verwendet.
Angenommen, ein externes Stylesheet hat den folgenden Stil für das Element <h1>:
h1
{
color: navy;
}Nehmen Sie dann an, dass ein internes Stylesheet auch den folgenden Stil für das Element <h1> hat:
h1
{
color: orange;
}Beispiel
Wenn der interne Stil nach dem Link zum externen Stylesheet definiert wird, sind die <h1>-Elemente "orange":
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Beispiel
Wenn jedoch der interne Stil vor dem Link zum externen Stylesheet definiert wird, sind die <h1>-Elemente "navy":
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
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 Head-Bereich)
- Browser-Standard
Ein Inline-Stil hat also die höchste Priorität und überschreibt externe und interne Stile und Browser-Standardwerte.
Schon mal von W3Schools Spaces gehört ? Hier können Sie kostenlos Ihre eigene Website erstellen oder Codeschnipsel zur späteren Verwendung speichern.
Kostenlos starten ❯* Keine Kreditkarte benötigt