Externe Stylesheets
Das Element style hat einen Nachteil: Seine Regeln gelten nur für die Seite, in die sie geschrieben sind. Eine Website hat meist viele Seiten, und alle sollen gleich aussehen. Du müsstest das Element style in jede Seite kopieren, und jede Änderung am Aussehen würde bedeuten, jede Seite zu ändern.
Deshalb ist die dritte Möglichkeit die gebräuchlichste: ein externes Stylesheet. Du schreibst die Regeln in eine eigene Datei mit der Endung .css, und jede Seite verweist mit dem Element link darauf, genau wie in der ersten Übung:
<link rel="stylesheet" href="style.css">Alle Seiten teilen sich dann ein Stylesheet. Änderst du darin eine Regel, zeigt sich die Änderung auf allen Seiten gleichzeitig. Außerdem bleibt der Inhalt in der HTML-Datei und die Gestaltung in der CSS-Datei, sodass beide leichter zu lesen sind.
Eine CSS-Datei enthält nur Regeln, ohne die Tags <style>, die zu HTML gehören:
p {
color: green;
}Wir haben dem Editor eine leere Datei style.css hinzugefügt. Verschieben wir unsere Regel dorthin.
So schreibst du es:
Anweisungen
- 1
Verschiebe die Regel für
paus dem Elementstylein die Dateistyle.css: Markiere sie, schneide sie aus (Strg+X, auf dem MacCmd+X) und füge sie instyle.cssein (Strg+V, auf dem MacCmd+V). Verschiebe nur die Regel, ohne die Tags<style>. - 2
Lösche in
index.htmldas Elementstyle, das jetzt leer ist, samt seinen Tags<style>und</style>. - 3
Füge in
headunterhalb des Elementstitledas Elementlinkhinzu, das die Seite mitstyle.cssverbindet. Nach einem Klick auf Ausführen sind die Absätze wieder grün.