CSS Einbinden

CSS (Cascading Style Sheets) ist die Sprache, mit der du das Aussehen von HTML-Elementen definierst. Um CSS zu nutzen, musst du es in deine Webseite einbinden. Es gibt verschiedene Möglichkeiten, CSS zu integrieren, jeweils mit eigenen Vor- und Nachteilen.

Die drei Methoden

1. Externes Stylesheet (empfohlen)

Hier wird CSS in einer separaten Datei geschrieben und mit einem <link>-Tag im HTML-Dokument eingebunden.

Vorteile:

Saubere Trennung von Struktur (HTML) und Design (CSS).
Wiederverwendbar auf mehreren Seiten.
Bessere Wartbarkeit.

<head>
  <link rel="stylesheet" href="styles.css">
</head>

rel="stylesheet" sagt dem Browser, dass es sich um ein Stylesheet handelt. href verweist auf den Pfad der CSS-Datei.

Besonderheiten beim Einbinden externer CSS-Dateien

Medienabfragen (Media Queries):
Du kannst Stylesheets nur für bestimmte Geräte oder Bildschirmgrössen laden:

<link rel="stylesheet" href="mobile.css" media="(max-width: 600px)">

Multiple Stylesheets:
Du kannst mehrere CSS-Dateien einbinden, z.B.:

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="main.css">

2. Internes Stylesheet (im <style>-Tag)

Hier schreibst du CSS direkt im HTML-Dokument im <head>-Bereich.

Vorteile:

Nützlich für kleine Seiten oder einzelne, spezifische Styles.
Kein zusätzlicher HTTP-Request für externe Datei.

Nachteil:

Nicht ideal bei vielen oder mehrfach verwendeten Styles.

<head>
  <style>
    body {
      background-color: #f0f0f0;
      font-family: Arial, sans-serif;
    }
  </style>
</head>

3. Inline-CSS (direkt im HTML-Element)

Du kannst CSS direkt in einem HTML-Element mit dem style-Attribut definieren.

Vorteile:

Schnelle, gezielte Anpassung einzelner Elemente.

Nachteil:

Unübersichtlich bei vielen Elementen.
Schwer zu warten und überschreibt andere Styles.

<p style="color: red; font-weight: bold;">Dieser Text ist rot und fett.</p>

Reihenfolge & Spezifität

Wenn mehrere Styles auf dasselbe Element zutreffen, entscheidet die Spezifität (genaue Regeln, die wichtig sind) und die Reihenfolge.
Mehr zu diesem Thema unter CSS Vererbung

CSS mit @import einbinden

@import ist eine CSS-Anweisung, mit der du eine externe CSS-Datei innerhalb einer CSS-Datei laden kannst. Sie funktioniert ähnlich wie das <link>-Tag, aber der Import passiert innerhalb einer CSS-Datei.

Verwendung

Innerhalb einer CSS-Datei ganz oben, vor allen anderen Regeln.
Du kannst damit mehrere CSS-Dateien in einer bündeln.

Syntax

@import url("styles2.css");

oder ohne url

@import "styles2.css";

Fazit

@import ist nützlich für das Verwalten von CSS-Dateien innerhalb von CSS, z.B. beim Modularisieren.
Für den eigentlichen Seitenaufbau und schnelle Ladezeiten ist <link> die bessere Wahl.