HTML kennt verschiedene Möglichkeiten um einzelne Zeichen oder das Layout einer ganzen Webseite zu formatieren.
Wir haben sie im Abschnitt Textformate kennengelernt. Ihre Aufgabe ist es, Elemente, wie z.B. Überschriften und Absätze oder einzelne Zeichen, Wörter oder Satzteile, hoch, tief, kursiv, farbig, fett etc. darzustellen.
Da die Präsentation mit dem Inhalt des Elements vermischt wird, ist die Aktualisierung oder Pflege mit hohem Aufwand verbunden, wenn die Stilregeln für mehrere Absätze, bzw. gleiche Element geändert werden sollen.
Eingebettete Stilregeln sind praktisch, wenn die Regel für alle gleichen Elemente einer HTML-Seite gelten soll. Sie werden im HEAD der HTML-Seite eingefügt. Hier z.B. wurden alle Überschriften in <h4> blau markiert. Schau dir den Quellcode an.
Ein externes Stylesheet ist eine Datei, die Stilregeln entält, die für das Erscheinungsbild einer gesamten
Website gelten. Hier ist z.B. die Textfarbe der Absätze für den gesamten Webauftritt auf "braun" gesetzt
worden." Die HTML-Datei wird im HEAD-Bereich der Datei mit dem "Style Sheet" verlinkt, siehe Quellcode. Für
den Code des Style Sheets clickt einfach nach Strg+U auf den Dateinamen "styles.css".
Es können mehrere Style-Dateien verknüpft oder auch aus dem Internet referenziert werden. Styles sind ein
sehr mächtiges Werkzeug, auf das an dieser Stelle nur ansatzweise eingegangen wird. Ein intensives Studium
der angegebenen Quellen ist anzuraten.
Wird bei den eingebetteten (--> HEAD) oder externen (Style Sheet) Stilregeln eine Eigenschaft mehrfach deklariert, so gilt der zuletzt festgelegte Wert. Ansonsten gilt: 1. Inline Style vor 2. Embedded Style vor 3. External Style.
Durch einen Inline-Style markieren wir ein spezifischen Element, durch die eingebetteten oder externen Stilregeln alle entsprechenden Elemente einer Seite oder aller Webseiten. Was ist aber, wenn wir innerhalb einer Seite, z.B. mehrere Absätze anders gestalten wollen? Dies geht mit den oben angemerkten Klassenselektoren, die entweder für eine Seite im head der HTML-Datei oder in einer verlinkten separaten css-Datei definieet werden. Selektor: .highlight {background: yellow;} und der Absatz wird mit p class="highlight" markiert.
Dieser Absatz hat die Klasse "highlight" und ist daher gelb markiert.
Dies ist ein Absatz, wieder mit normaler Farbe.
Dieser Absatz hat die Klassen "highlight" und "kursiv" und ist daher gelb markiert und kursiv.
Natürlich könnten Farbe oder Hintergrund durch einen Inline-Style geändert werden, will man aber "auf einen Schlag" alle entsprechenden Elemente deklarieren, lässt sich dies über das class-Attribut anwenden, und im HEAD oder einer separaten css-Datei definieren, siehe Quellcode. Ein Stil kann verschiedenen Elementen gleichzeitig zugewiesen werden (h1, p { color: blue; }) oder nur für ein bestimmtes Element definiert werden. In diesem Fall wird dem Element ein . vorangestellt: .p { color: blue; }. Zudem lassen sich weitere Kombinationen und Abhängigkeiten darstellen. Früher oder später ist es daher unumgänglich sich mit css und Selektoren zu beschäftigen, z. B. in den Tutorials .
Und wieder styles, styles, styles... Die Textgröße ist hier in der css-Datei auf 1 rem festgelegt. Dies entspricht der Schriftgröße in der Standardeinstellung von 16 Pixel der meisten Browser. Alternativ könnte die Angabe in Pixel oder Prozent erfolgen. Zur Weiterbildung empfehle ich Pixel oder em? Welche Schrifteinheit ist die Richtige? oder css-tricks.