CSS direkt im <head> der Seite definieren

CSS kann direkt im <head> der HTML-Seite definiert werden. Dafür wird ein <style>-Tag eingefügt, in dem die CSS-Regeln stehen.

Diese Methode eignet sich für kleinere Anpassungen oder Seiten ohne externes Stylesheet. Bei größeren Projekten ist eine externe CSS-Datei vorzuziehen.

<head>
  <style>
    body  { background: #6EB6BB; }
    main  { color: #0E3460; }
    h2    { text-transform: uppercase; }
    h3    { text-decoration: underline; }
    main p {
      border: 1px dotted #008;
      padding: .5em;
      background: rgba(255, 255, 255, .5);
    }
    b { background: #efe816; }
  </style>
</head>

Alle obigen Regeln sind aktiv — beobachte die Effekte im Inhaltsbereich unten (türkiser Hintergrund, blaue Schrift, großgeschriebene h2 etc.).

Hallo!

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Zwischenüberschrift

Und weil es so schön ist kommt hier direkt noch mehr Text, sogar mit einem hervorgehobenen Wort.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.