CSS einbinden

  1. Direkt am HTML Element, über "style" Attribut für Element definieren

    • bezieht sich nur auf das Element
    • nicht für globale Styles geeignet (z. B. alle Überschriften gleich)
    • sollte nur im Ausnahmefall verwendet werden
    HTML<p style="background: blue; color: white;">Text</p>
<p>mehr Text</p>

  2. Im head Element, über style Element für einzelne Seite definieren

    • bezieht sich nur auf die Seite in der es eingebunden ist
    • nicht für seitenübergreifende Styles geeignet
    HTML<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>Titel der Seite</title>
    <style>
      p {
        background: blue;
        color: white;
      }
    </style>
  </head>
  <body>
    <p>Text</p>
    <p>mehr Text</p>
  </body>
</html>

  3. Im head Element, zentrale CSS Datei für einzelne Seite laden

    • kann in jeder Seite eingebunden werden
    • alle Styles zentral verwaltet
    • übliche Vorgehensweise
    HTML<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>Titel der Seite</title>
    <base href="https://uhahne.github.io/GIS/" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <p>Text</p>
    <p>mehr Text</p>
  </body>
</html>