HTML Stile – CSS
Mode kommt aus der Mode, aber Stil – niemals! Und es ist wahr!..
Coco Chanel
CSS steht für Cascading Style Sheets.
CSS spart viel Arbeit. Es kann das Layout mehrerer Webseiten gleichzeitig steuern.
CSS = Styles and Colors
Was ist CSS?
Cascading Style Sheets (CSS) werden zum Formatieren des Layouts einer Webseite verwendet.
Mit CSS können Sie die Farbe, Schriftart, die Textgröße, den Abstand zwischen Elementen, die Positionierung und Anordnung der Elemente, die zu verwendenden Hintergrundbilder oder Hintergrundfarben sowie unterschiedliche Anzeigen für verschiedene Geräte und Bildschirme steuern Größen und vieles mehr!
Tipp: Das Wort kaskadierend bedeutet, dass ein Stil, der auf ein übergeordnetes Element angewendet wird, auch für alle untergeordneten Elemente innerhalb des übergeordneten Elements gilt. Wenn Sie also die Farbe des Fließtexts auf „Blau“ einstellen, erhalten alle Überschriften, Absätze und andere Textelemente innerhalb des Fließtexts ebenfalls die gleiche Farbe (sofern Sie nichts anderes angeben)!
CSS verwenden
CSS kann auf drei Arten zu HTML-Dokumenten hinzugefügt werden:
- Inline - durch Verwendung des Attributs
styleinnerhalb von HTML-Elementen - Internal - durch die Verwendung eines
<style>-Elements im Abschnitt<head> - External - durch die Verwendung eines
<link>-Elements zum Verknüpfen mit einer externen CSS-Datei
Die gebräuchlichste Methode zum Hinzufügen von CSS besteht darin, die Stile in externen CSS-Dateien beizubehalten. In diesem Tutorial verwenden wir jedoch Inline- und interne Stile, da dies einfacher zu demonstrieren ist und es für Sie einfacher ist, es selbst auszuprobieren.
Inline CSS
Ein Inline-CSS wird verwendet, um einen eindeutigen Stil auf ein einzelnes HTML-Element anzuwenden.
Ein Inline-CSS verwendet das Attribut style eines HTML-Elements.
Das folgende Beispiel legt die Textfarbe des fest <h1> Element auf Blau und die Textfarbe des <p> Element zu Rot:
Beispiel
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
Try it Yourself »
Internal CSS
Ein internes CSS wird verwendet, um einen Stil für eine einzelne HTML-Seite zu definieren.
Ein internes CSS wird im Abschnitt <head> einer HTML-Seite innerhalb eines <style>-Elements definiert.
Das folgende Beispiel setzt die Textfarbe ALLER <h1>-Elemente (auf dieser Seite) auf Blau und die Textfarbe ALLER <p> Elemente zu rot. Zusätzlich wird die Seite mit einer "powderblue" Hintergrundfarbe angezeigt:
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »
External CSS
Ein externes Stylesheet wird verwendet, um den Stil für viele HTML-Seiten zu definieren.
Um ein externes Stylesheet zu verwenden, fügen Sie im Abschnitt <head> jeder HTML-Seite einen Link dazu hinzu:
Beispiel
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »
Das externe Stylesheet kann in jedem Texteditor geschrieben werden. Die Datei darf keinen HTML-Code enthalten und muss mit der Erweiterung .css gespeichert werden.
So sieht die Datei "styles.css" aus:
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Tipp: Mit einem externen Stylesheet können Sie das Aussehen einer gesamten Website ändern, indem Sie eine Datei ändern!
CSS Farben, Schriftarten und Größen
Hier zeigen wir einige häufig verwendete CSS-Eigenschaften. Später erfahren Sie mehr über sie.
Die CSS-Eigenschaft color definiert die zu verwendende Textfarbe.
Die CSS-Eigenschaft font-family definiert die zu verwendende Schriftart.
Die CSS-Eigenschaft font-size definiert die zu verwendende Textgröße.
Beispiel
Verwendung von CSS-Eigenschaften für Farbe, Schriftfamilie und Schriftgröße:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »
CSS Border
Die CSS-Eigenschaft border definiert einen Rahmen um ein HTML-Element.
Tipp: Sie können für fast alle HTML-Elemente einen Rahmen definieren.
Beispiel
Verwendung der CSS-Border-Eigenschaft:
p {
border: 2px solid powderblue;
}
Try it Yourself »
CSS Padding
Die CSS-Eigenschaft padding definiert einen Abstand (Abstand) zwischen dem Text und dem Rahmen.
Beispiel
Verwendung von CSS-Rahmen- und Fülleigenschaften:
p {
border: 2px solid powderblue;
padding: 30px;
}
Try it Yourself »
CSS Margin
Die CSS-Eigenschaft margin definiert einen Rand (Leerraum) außerhalb des Rahmens.
Beispiel
Verwendung von CSS-Rahmen- und Randeigenschaften:
p {
border: 2px solid powderblue;
margin: 50px;
}
Try it Yourself »
Link zu externem CSS
Externe Stylesheets können mit einer vollständigen URL oder mit einem Pfad relativ zur aktuellen Webseite referenziert werden.
Beispiel
In diesem Beispiel wird eine vollständige URL verwendet, um auf ein Stylesheet zu verlinken:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Try it Yourself »
Beispiel
Dieses Beispiel verweist auf ein Stylesheet, das sich im HTML-Ordner der aktuellen Website befindet:
<link rel="stylesheet" href="/html/styles.css">
Try it Yourself »
Beispiel
Dieses Beispiel verweist auf ein Stylesheet, das sich im selben Ordner wie die aktuelle Seite befindet:
<link rel="stylesheet" href="styles.css">
Try it Yourself »
Weitere Informationen zu Dateipfaden finden Sie im Kapitel HTML-Dateipfade.
Kapitelzusammenfassung
- Verwenden Sie das HTML-Attribut
stylefür das Inline-Styling - Verwenden Sie das HTML-Element
<style>um internes CSS zu definieren - Verwenden Sie das HTML-Element
<link>um auf eine externe CSS-Datei zu verweisen - Verwenden Sie das HTML-Element
<head>zum Speichern von <style>- und <link>-Elementen - Verwenden Sie die CSS-Eigenschaft
colorfür Textfarben - Verwenden Sie die CSS-Eigenschaft
font-familyfür Textschriftarten - Verwenden Sie die CSS-Eigenschaft
font-sizefür Textgrößen - Verwenden Sie die CSS-Eigenschaft
borderfür Ränder - Verwenden Sie die CSS-Eigenschaft
paddingfür Platz innerhalb des Rahmens - Verwenden Sie die CSS-Eigenschaft
marginfür Platz außerhalb des Rahmens
Tipp: Viel mehr über CSS erfahren Sie in unserem CSS Tutorial.
HTML Übungen
HTML Stil-Tags
| Tag | Beschreibung |
|---|---|
| <style> | Definiert Stilinformationen für ein HTML-Dokument |
| <link> | Definieren Sie eine Verknüpfung zwischen einem Dokument und einer externen Ressource |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz.
