Inhaltsverzeichnis

Gestalten der HTML-Elemente mit CSS (Cascading Style Sheets)

Es wird Zeit, dass wir lernen, wie wir HTML-Elemente farbig gestalten können, wie wir Rahmen setzen und Hintergrundfarben verändern können!

Alle HTML-Elemente sind Objekte, deren Attributwerte (Textfarbe, Hintergrundfarbe, Rahmenstärke, Außenabstand, …) wir ändern können. Früher geschah dies direkt im HTML-Quelltext, z.B. so: 

<h1 style="color: blue; margin-top: 10px">Neue Überschrift</h1>

Das wurde mit der Zeit sehr unübersichtlich, vor allem war es aber sehr umständlich, wenn man z.B. alle 15 Überschriften einer Webseite auf die selbe Art gestalten wollte. Daher wurde eine Möglichkeit geschaffen, Stile (engl.: styles) unabhängig von den HTML-Seiten in extra Dateien ("css-Dateien") zu verwalten und von den HTML-Elementen aus nur darauf zu verweisen.

Beispiel 1: verschiedenfarbige Überschriften

Aufgabe 1:
Die obige Webseite besteht aus zwei Dateien: der Datei index.html, die die HTML-Elemente enthält sowie der Datei test.css mit den Stilen.
Schau' Dir zusammen mit Deiner Banknachbarin/Deinem Banknachbarn die beiden Dateien genau an und beantworte folgende Fragen:

  • Woher weiß der Browser, dass er zusätzlich zur Datei index.html auch die Datei test.css vom Server holen muss?
  • Wie werden die beiden Stile roteUeberschrift und blaueUeberschrift in der css-Datei definiert?
  • Wie wird in der HTML-Datei kenntlich gemacht, welche Überschrift in welchem Stil dargestellt werden soll?

Aufgabe 2:
Lege eine html-Datei und eine css-Datei in Deinem Projekt an, recherchiere die Antworten zu folgenden Fragen im Netz und probiere gleich aus!

  • Mit welcher CSS-Eigenschaft kann man die Schriftgröße verändern?
  • Wie kann man die Hintergrundfarbe eines div-Elements verändern?
  • Wie kann man die Hintergrundfarbe der gesamten Webseite verändern?
  • Wie kann man erreichen, dass um ein div-Element ein Rahmen gezogen wird? Wie lässt sich dessen Farbe ändern?
  • Wie kann man den Abstand zweier div-Elemente verändern?

Wichtige CSS-Eigenschaften

  • color: red (Schriftfarbe)
  • background-color: blue (Hintergrundfarbe)