Die 3 Methoden Styles einzusetzen

Übersicht

  1. Als Attribut des HTML-Tags
  2. Styles-Bereich im HEAD der HTML-Seite
  3. Externe css-Datei, auf die mehrere HTML-Seiten zugreifen

Worauf lassen sich Styles anwenden?

Styles lassen sich auf fast alle Bereiche und Elemente einer HTML-Seite anwenden. Egal ob es sich um Texte, Bilder, Bereiche, Listen oder Hintergründe handelt, ihr Aussehen und Verhalten kann man mit Styles beeinflussen.

Man kann sagen, je näher die Style-Angabe am zu formatierenden Element steht, desto stärker wirkt diese. Weiter weg stehende Angaben werden dabei überschrieben. Ich werde das im Laufe dieser Lektion vorführen.

Darf Text einfach so im BODY stehen?

Ganz nebenbei sei hier noch als Ergänzung zu den vorigen Lerninhalten erwähnt, dass es zwar funktioniert, wenn Text direkt ohne äußeres Element wie div oder p im body-Bereich der Seite steht. Jedoch sollte man dies möglichst vermeiden. Deshalb habe ich die Texte hier in einen div gepackt. Der Inhalt der Aufzählung steht nicht direkt im body-Bereich, er ist ja in die li- und die ol-Tags eingeschlossen.

Wie werden externe Style-Dateien eingesetzt?

Ein Web-Auftritt besteht ja auch vielen einzelnen HTML-Seiten, die alle einheitlich formatiert erscheinen sollen.

Ich werde dir in den weiteren Schritten zeigen, wie man ein einfaches Navigationsmenü erstellt, und wie man die Formate aller aufzurufenden Seiten in einer externen CSS-Datei verwaltet. CSS steht für Cascading Style Sheet. Das bedeutet wir können bestimmten Elementen mehrere Formatangaben zuweisen. Je nachdem, wo sich die Elemente befinden, wirken sich die Angaben aus. Das klingt jetzt sehr theoretisch, ist es aber auch. Deshalb werden wir gemeinsam die Geheimnisse der Styles erkunden und du wirst sehen wie man diese übersichtlich und nachvollziehbar anwenden kann.