CSS in externem Stylesheet

In der Praxis wird CSS fast immer in einer externen .css-Datei definiert, die im <head> eingebunden wird.

Vorteile: ein Stylesheet kann für viele HTML-Seiten gleichzeitig gelten — Änderungen müssen nur einmal gemacht werden. HTML und CSS können parallel im Editor bearbeitet werden.

<head>
  <!-- Externes Stylesheet einbinden -->
  <link rel="stylesheet" href="css/1_02.css">
</head>

Die externe Datei css/1_02.css enthält folgende Regeln — sie sind im Inhaltsbereich aktiv:

body  { background: #9acfea; }

main  {
  font-family: "Times New Roman", serif;
  font-size: 1.2em;
  color: #0a4b3e;
  font-style: italic;
}

h2    { text-transform: uppercase; }
h3    { text-decoration: underline; }

main p { border: 1px dotted #008; padding: .5em; }
b      { background: #efe816; }

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.