Webdesign
Hosting
Wartung
Marketing
KI-Optimierung
Webdesign
Hosting
Wartung
Marketing
100 Bleistifte
Einbinden von CSS in HTML-Dokumente
CSS kann auf verschiedene Arten in ein HTML-Dokument eingebunden werden. Jede Methode hat eigene
Einsatzbereiche, Vor- und Nachteile. Moderne Webseiten verwenden meist eine Kombination aus
externen Stylesheets und gelegentlichen eingebetteten Styles. Inline-Styles sollten dagegen nur
in Ausnahmefällen verwendet werden.
Es gibt drei grundsätzliche Varianten:
- Inline-Styles: Direkt innerhalb eines HTML-Tags per
style-Attribut. - Eingebettete Stylesheets: Über ein
<style>-Element im<head>-Bereich. - Externe Stylesheets: Über
<link>oder@importeingebunden.
Im Folgenden lernst du jede Methode einzeln kennen, inkl. Best Practices, Beispielen und realen
Anwendungsfällen.
Hinweis: Inline-Styles haben die höchste Priorität (Spezifität), externe Stylesheets
die niedrigste. Wenn mehrere Regeln denselben Selektor betreffen, überschreibt ein Inline-Style
immer die gleichen Regeln in einem eingebetteten oder externen Stylesheet.
Inline-Styles
Inline-Styles werden direkt am HTML-Element über das style-Attribut definiert. Diese
Methode eignet sich für Tests, einmalige Formatierungen oder E-Mail-Templates. Jedoch sollten
Inline-Styles grundsätzlich vermieden werden, da sie schwere Wartungsprobleme erzeugen.
Ein Inline-Style besteht aus einer Liste von Eigenschaft: Wert-Paaren, getrennt durch
Semikolons:
<h1 style="color:red; font-size:30px;">CSS Überschrift</h1>
<p style="color:green; font-size:22px;">Ein Beispieltext.</p>
<div style="color:blue; font-size:14px;">Noch ein Absatz.</div>
Diese Methode verletzt die Trennung von Struktur und Darstellung. HTML sollte Inhalte beschreiben –
nicht deren Aussehen. Inline-Styles erschweren das Refactoring, verhindern Wiederverwendung und
blockieren viele CSS-Funktionen.
Inline-Styles können außerdem keine Pseudo-Klassen wie :hover oder Pseudo-Elemente
wie ::before nutzen.
Hinweis: Inline-Styles können keine Pseudo-Elemente oder CSS-Variablen verwenden.
Wichtige Design-Elemente gehören daher immer in externe Stylesheets.
Eingebettete Stylesheets
Eingebettete oder interne Stylesheets befinden sich im <head>-Bereich eines
Dokuments und werden über ein <style>-Element definiert. Sie gelten nur für das
jeweilige HTML-Dokument.
Eingebettete Styles sind sinnvoll, wenn eine einzelne Datei eigenes Styling benötigt, z. B. bei
HTML-Vorlagen oder E-Mails.
<!DOCTYPE html>
<html lang="de">
<head>
<title>CSS Einführung</title>
<style>
body { background-color: blue; }
p { color: #fff; }
</style>
</head>
<body>
<h1>Beispielüberschrift</h1>
<p>Ein Absatz mit weißem Text.</p>
</body>
</html>
Tipp: Das Attribut type="text/css" ist in modernen Browsern optional
und kann weggelassen werden. HTML5 erkennt CSS automatisch.
Externe Stylesheets
Externe Stylesheets sind die Standardmethode für professionelles Webdesign. Sie enthalten alle
Regeln in einer separaten Datei, meist .css. Änderungen an einer einzigen Datei können
sofort ganze Websites visuell verändern.
Ein Beispiel für ein einfaches Stylesheet style.css:
body {
background: lightyellow;
font: 18px Arial, sans-serif;
}
h1 {
color: orange;
}
Die Datei wird über den <link>-Tag im <head> eingebunden:
<!DOCTYPE html>
<html lang="de">
<head>
<title>CSS Einführung</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Überschrift</h1>
<p>Ein Absatz.</p>
</body>
</html>
Tipp:
Externe Stylesheets sind die beste Methode für große Websites. Sie ermöglichen Wiederverwendung,
klare Strukturen und schnellere Ladezeiten durch Browser-Caching.
Stylesheets importieren
Zusätzlich zu <link> können Stylesheets mit @import geladen werden.
Diese Methode wird jedoch seltener empfohlen, da sie zusätzliche Ladezeiten erzeugt.
<style>
@import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>
Auch innerhalb von CSS-Dateien kannst du weitere Stylesheets importieren:
@import url("css/layout.css");
@import url("css/color.css");
body {
color: blue;
font-size: 14px;
}
Hinweis: Alle @import-Regeln müssen am Anfang des Stylesheets stehen.
Importierte Dateien verlängern die Ladezeit, da sie nicht parallel geladen werden. Für produktive
Websites sollte daher <link> bevorzugt werden.
Weitere Kunden, die uns vertrauen!
