CSS auslagern

Wenn du Webseiten gestaltest, kommt früher oder später die Frage auf: Wie und wo schreibe ich eigentlich mein CSS? – Es gibt drei Möglichkeiten:

  • 1. Inline-CSS (direkt im HTML-Tag) <h1 style="color:red;">Titel</h1>
    • Nachteil: schwer wartbar, unübersichtlich bei größeren Projekten.

  • 2.Internes CSS (im <style>-Block)

    • <head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>

    Vorteil: Besser als Inline, aber nur für kleine Projekte sinnvoll.
    Nachteil: Das CSS ist an eine einzelne Seite gebunden – Wiederverwendung = schwierig.

  • 3. Externes CSS (in eigener Datei wie main.css)

    • /*Im HTML einfügen*/
<head>
  <link rel="stylesheet" href="main.css">
</head>
    /*Die main.css*/
p {
  color: blue;
}

    Vorteile

  • Sauber getrennt: HTML für Inhalt, CSS für Gestaltung.
  • Einfache Wiederverwendung auf mehreren Seiten.
  • Schnellere Ladezeiten dank Browser-Cache.
  • Übersichtlicher Code → besseres Arbeiten im Team.
  • Wartung und Erweiterung werden deutlich einfacher.


    • Warum nennen wir die Datei main.css und nicht style.css?

    Der Name style.css ist zwar sehr verbreitet, aber auch sehr allgemein. Bei größeren Projekten oder Webseiten mit mehreren Stylesheets kann das zu Verwirrung führen. main.css bedeutet: "Das ist unser Hauptstylesheet.“

  • main.css → Grunddesign
  • custom.css → Eigene Anpassungen oder Überschreibungen eines bestehenden Designs
  • theme.css → Farben/Themen
  • responsive.css → Layout-Anpassungen für Handys
  • print.css → Druckansicht