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?
Dieser Absatz ist gelb markiert.
Dies ist ein Absatz, wieder mit normaler Farbe.
Dieser Absatz ist gelb markiert.
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 der Stil definieren, siehe Quellcode. Zudem empfehle ich den Abschnitt über Klassenselektoren in den Tutorials durchzulesen.
Und wieder styles, styles, styles... Die Textgröße ist hier in der css-Datei auf 1 em festgelegt. 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.