CSS in HTML einbinden: Eine Anleitung mit Beispielen
Um HTML ansprechend zu formatieren, kommt die Stylesheet-Sprache CSS zum Einsatz. So werden Attribute wie Layout, Farbe und Form der einzelnen HTML-Elemente festgelegt. Dabei existieren die CSS-Gestaltungsanweisungen unabhängig von HTML und müssen erst in das elektronische Dokument eingebunden werden.
- 3x schneller und 60 % günstiger
- Maximale Verfügbarkeit mit > 99.99 %
- Nur bei IONOS: Bis zu 500 GB Speicherplatz inklusive
CSS einbinden: Welche Methoden gibt es?
Wenn Sie CSS in HTML einbinden, ist dies durch interne oder externe Stylesheets möglich. Bei internen Stylesheets befinden sich die CSS-Anweisungen direkt im HTML-Dokument. Hier besteht die Möglichkeit, CSS am Anfang der HTML-Datei zu integrieren oder direkt und fortlaufend im Quellcode unterzubringen. Bei dieser Methode ist ein gutes Grundverständnis von HTML und dessen Syntax von Vorteil.
Die gängigste und sauberste Methode bei der Entwicklung von Websites ist allerdings die Verwendung von externen CSS-Stylesheets. Dabei erfolgt die CSS-Einbindung durch eine Verlinkung des HTML-Dokuments mit einer externen CSS-Datei. Im Folgenden stellen wir die drei Methoden im Überblick dar:
- Inline-Style, d. h. direkt im Quellcode
- am Anfang des HTML-Dokuments
- ausgelagert in einer externen CSS-Datei
- Profi-Website in Sekunden dank KI
- Aus tausenden Vorlagen auswählen
- 30 Tage kostenlos testen
CSS einbinden: Inline-Style
Bei dieser Methode wird die Gestaltungsanweisung mithilfe eines style-Tags direkt im Quellcode eingebunden. Die gewünschten Eigenschaften sind so nur einem HTML-Element zugewiesen, sodass im Verlauf des HTML-Dokuments abweichende Designs möglich sind. Im Beispiel unten soll die Überschrift h1 in der Farbe Blau und in Schriftgröße 14 dargestellt werden:
<h1 style="color: blue; font-size: 14px;">Dies ist eine Überschrift</h1>Bei dieser Art von Einbindung gilt es zu beachten, dass viele Vorteile, die CSS mit sich bringt, verloren gehen. Dazu gehört die Möglichkeit, einen übergreifenden Befehl festzulegen, der dann beispielsweise für alle h1-Elemente im HTML-Dokument gilt. Unter Umständen entsteht auch ein größerer Wartungsaufwand, da direkt in den HTML-Code eingegriffen wird.
Am Anfang von HTML CSS einbinden
Bei dieser Variante binden Sie CSS in den Kopfbereich Ihres HTML-Dokuments ein. Das style-Tag wird so zum Teil des head-Elements und gilt für die gesamte Datei. Hier sind die CSS-Gestaltungsanweisungen zwar immer noch im Dokument selbst untergebracht, vom HTML-Code jedoch deutlich besser getrennt. Im Beispiel unten gilt derselbe Befehl wie im vorherigen Beispiel. Diesmal sollen jedoch alle h1-Überschriften in der Datei nach den Angaben formatiert werden.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: blue; font-size: 14px;}
</style>
</head>
<body>
<h1>Dies ist eine Überschrift</h1>
<p>Dies ist ein Absatz.</p>
</body>
</html>CSS mit ausgelagerter Datei integrieren
Dies ist wahrscheinlich die beste Methode, mit der Sie CSS in HTML einbinden können. Eine Website besteht nämlich oft aus vielen Seiten, sodass es sinnvoll ist, Gestaltungsanweisungen in einer separaten Datei zu speichern. Das ermöglicht eine saubere Trennung zwischen Inhalt und Design und erleichtert die Wartung. Die ausgelagerte Datei wird einfach mit dem HTML-Dokument verknüpft. Dabei speichern Sie das externe Stylesheet mit der Endung .css und verwenden dann ein link-Tag, um es in Ihre HTML-Datei einzubinden. Im Beispiel trägt die CSS-Datei den Namen „stylesheet.css“.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1>Dies ist eine Überschrift</h1>
<p>Dies ist ein Absatz.</p>
</body>
</html>Das Attribut rel definiert hier den logischen Beziehungstyp und href bezieht sich auf die einzubettende CSS-Datei. Beachten Sie, dass das link-Element auch andere Attribute haben kann. Mit der Eigenschaft media="print" legen Sie beispielsweise fest, dass das Stylesheet nur in der Druckansicht zum Einsatz kommt. Das externe Stylesheet enthält keine HTML-Tags, sondern lediglich den jeweiligen Selektor und geschweifte Klammern mit den Deklarationen wie im folgenden Beispiel:
h1 {
color: blue;
font-size:14px;
}Die gängigsten neuen CSS-Features
Innerhalb dieser klassischen Methoden zur Einbindung von CSS haben sich in den letzten Jahren zahlreiche neue Funktionen entwickelt, die das Gestalten von Websites noch flexibler machen. Mit modernen Selektoren wie :has() lassen sich Eltern-Elemente abhängig von ihren Kindern ansprechen, während Container-Abfragen dafür sorgen, dass sich einzelne Komponenten unabhängig von der Fensterbreite an die Größe ihres jeweiligen Containers anpassen. Diese und weitere neue Features ermöglichen es, modularere, dynamischere und benutzerfreundlichere Designs umzusetzen, ohne dabei auf komplexe Workarounds oder JavaScript zurückgreifen zu müssen.
CSS-Pseudoklasse :has()
Dabei handelt es sich um einen Parent Selector, der vorgefertigte Styles an bestimmte Bedingungen knüpfen kann. Beispielsweise kann ein Feld so bei einem ungültigen Input rot und bei einem gültigen Input grün gefärbt werden:
.form-group:has(input:invalid) {
border: 2px solid red;
}
.form-group:has(input:valid) {
border: 2px solid green;
}Container-Abfragen
Container-Abfragen ermöglichen es, CSS-Regeln nicht mehr nur an die Größe des gesamten Browserfensters (wie bei CSS Media Queries), sondern an die Größe des umgebenden Containers zu knüpfen.
So kann sich jedes Modul oder jede Komponente individuell anpassen, je nachdem, wie viel Platz in seinem Parent-Element vorhanden ist. Damit wird modulares, wirklich flexibles responsives Webdesign möglich, das unabhängig von der Fensterbreite ist. So kann beispielsweise eingestellt werden, dass Karten mit Bild und Text in einer Reihe nebeneinander dargestellt werden, sobald ihr umgebender Container breit genug ist.
Ist der Container schmaler als ein festgelegter Wert, in diesem Beispiel 400 Pixel, dann bleibt die Standarddarstellung.
@container (min-width: 400px) {
.card { flex-direction: row; }
}CSS-Nesting
CSS-Nesting erlaubt es, Selektoren direkt innerhalb anderer Selektoren zu verschachteln, ähnlich wie man es bisher aus SCSS oder LESS CSS kennt.
Dadurch bleibt der Code übersichtlicher, weil zusammengehörige Styles an einer Stelle stehen, statt immer wieder lange Selektorketten zu wiederholen. In diesem Beispiel bekommen alle Buttons den gleichen Grundstil, und je nach zusätzlicher Klasse (primary oder secondary) bekommen sie einen unterschiedlichen Look:
button {
padding: 0.5rem 1rem;
border: none;
&.primary {
background: blue;
color: white;
}
&.secondary {
background: gray;
color: black;
}
}Neue Farb-Funktionen
Mit den neuen CSS-Funktionen wie color-mix() oder light-dark() können Sie Farben direkt im Stylesheet dynamisch mischen oder je nach Helligkeit automatisch Varianten wählen. Das macht es möglich, etwa Farbübergänge, Themes oder Dark-Mode-Anpassungen zu gestalten, ohne vorher feste Farbwerte berechnen zu müssen.
So wird CSS flexibler, weil Farben nicht mehr nur statisch festgelegt, sondern kalkuliert und angepasst werden können. In diesem Beispiel wird die Hintergrundfarbe aller Elemente mit der Klasse .btn durch die CSS-Funktion color-mix() auf ein 50:50-Verhältnis zwischen Rot und Blau, also Violett, festgelegt.
.btn {
background: color-mix(in srgb, red 50%, blue);
}Scroll Snap
Scroll Snap ist eine CSS-Funktion, mit der Sie festlegen können, dass sich Elemente beim Scrollen automatisch an bestimmten Positionen „einrasten“. Damit lassen sich z. B. Bildergalerien, Karussells oder Seitenabschnitte bauen, die beim Scrollen sauber auf einer definierten Stelle stoppen.
Das sorgt für eine flüssige und benutzerfreundliche Navigation. Im folgenden Beispiel scrollt der übergeordnete Container .slider horizontal (x) und sorgt dafür, dass das Einrasten verpflichtend ist (mandatory). Jedes Kindelement .slide richtet sich beim Scrollen so aus, dass es am Anfang des Containers (start) „einrastet“.
.slider {
scroll-snap-type: x mandatory;
}
.slide {
scroll-snap-align: start;
}