# 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.
## CSS einbinden: Welche Methoden gibt es?
Wenn Sie [CSS](https://www.ionos.de/digitalguide/websites/webdesign/was-ist-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](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-lernen-das-grosse-einsteiger-tutorial/) 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
## 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](https://www.ionos.de/digitalguide/websites/web-entwicklung/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:
```html
Dies ist eine Überschrift
```
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](https://www.ionos.de/digitalguide/websites/webdesign/css-lernen-leicht-gemacht/) 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.
```html
Dies ist eine Überschrift
Dies ist ein Absatz.
hash_02757cee68e334d30fa912bb369e66836fdd28cb
```
## 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“.
```html
Dies ist eine Überschrift
Dies ist ein Absatz.
hash_02757cee68e334d30fa912bb369e66836fdd28cb
```
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](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-tags/), sondern lediglich den jeweiligen Selektor und geschweifte Klammern mit den Deklarationen wie im folgenden Beispiel:
```css
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:
```css
.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](https://www.ionos.de/digitalguide/websites/webdesign/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](https://www.ionos.de/digitalguide/websites/webdesign/was-bedeutet-responsive-design/) 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.
```css
@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](https://www.ionos.de/digitalguide/websites/web-entwicklung/less-css-tutorial/) 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:
```css
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.
```css
.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“.
```css
.slider {
scroll-snap-type: x mandatory;
}
.slide {
scroll-snap-align: start;
}
```
This is a markdown version of: [https://www.ionos.de/digitalguide/websites/webdesign/css-in-html-einbinden/](https://www.ionos.de/digitalguide/websites/webdesign/css-in-html-einbinden/) for AI/LLM consumption.