CSS-Nutzung
Es gibt 3 Möglichkeiten, CSS-Stile in das HTML-Dokument einzufügen.
- Inline-Stil - Zuweisen eines style-Attributs zu HTML-Elementen
- Interner Stil - Verwenden des
<style>-Elements im<head>-Bereich - Externer Stil - Erstellen einer externen CSS-Datei
Inline-Stil
Zur Definition von Stilregeln können Sie das style-Attribut eines beliebigen HTML-Elements verwenden. Diese Regeln lassen sich nur auf dieses Element anwenden. Das style-Attribut kann jede beliebige CSS-Eigenschaft enthalten.
Beispiel zum Erstellen eines Inline-Stils für ein HTML-Dokument:
Beispiel für einen CSS-Inline-Stil
<!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
Im Folgenden erklären wir das oben gezeigte Beispiel, in dem wir den Inline-Stil verwendet haben. Innerhalb des <h2>-Tags haben wir style="color: #1c87c9" geschrieben, was bedeutet, dass unsere Überschrift die Farbe #1c87c9 haben soll.
Gleiches haben wir mit dem <p>-Tag gemacht. Wir haben color: #8ebf42; font-size: 15px in unser Tag geschrieben, was bedeutet, dass der Text zwischen dem öffnenden <p> und dem schließenden </p>-Tag die Farbe #8ebf42 hat und die Schriftgröße 15px beträgt.
Interner Stil
Beim internen Stil enthält jede HTML-Datei den für das Styling einer Seite benötigten CSS-Code. Sie fügen den CSS-Code einfach innerhalb der <head>- und </head>-Tags jeder HTML-Datei ein, die Sie stylen möchten. Das folgende Beispiel veranschaulicht dies.
Die vorgenommenen Änderungen wirken sich nur auf eine Seite aus. Wenn Sie mehrere Seiten stylen möchten, müssen Sie die Änderungen einzeln vornehmen.
Das folgende Beispiel zeigt, dass der Absatz weiß sein wird und die Seite die Farbe #1c87c9 hat.
Beispiel zum Erstellen eines internen Stils für ein HTML-Dokument:
Beispiel für einen CSS-internen Stil
<!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
Der externe Stil wird häufig verwendet, um allgemeine Stile auf die gesamte Website anzuwenden. Dabei wird eine externe CSS-Datei erstellt, die alle Stilinformationen enthält. Sie können eine solche Datei mit einem beliebigen Text- oder HTML-Editor wie „Notepad“ oder „Sublime Text“ erstellen.
Eine CSS-Datei enthält nur CSS-Code und wird einfach mit der Dateierweiterung .css gespeichert. Um eine externe Stylesheet-Datei mit einer Webseite zu verknüpfen, sollten Sie das <link>-Tag im <head>-Bereich des HTML-Dokuments verwenden. Jede Webseite sollte mit dem Stylesheet verknüpft sein.
Bei Verwendung eines externen Stylesheets sind alle HTML-Dateien mit einer einzigen CSS-Datei verknüpft, was zu einem einheitlichen Erscheinungsbild führt. Wenn Sie den Stil der Webseiten ändern möchten, müssen Sie lediglich die entsprechenden Änderungen in einer einzigen .css-Datei vornehmen.
Beispiel zum Erstellen eines externen Stils für ein HTML-Dokument:
Beispiel für einen CSS-externen Stil
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>Praxis
Wie kann man CSS in HTML einbinden?