01 Einstieg in CSS mit Farben

Einstieg in das Thema

Was brauchst du als Basiswissen?

Die Grundlagen von HTML sind notwendig.

Worum geht es?

Bisher war die Welt schwarz-weiß. Du konntest verschiedene Elemente erstellen, denen aber kein Aussehen, vor allem keine Farbe geben. Darum geht es nun.

Was ist das Ziel?

Am Ende kannst du

  • Elementen eine Vorder- und eine Hintergrundfarbe geben,
  • kennst Farbnamen und
  • hast Einblick bekommen, wie man das Aussehen von HTML-Elementen beeinflussen kann.

Erarbeitung

Theorie

Aufgaben zur Erarbeitung

Nimm für folgende Aufgaben eine beliebige vorherige Webseite als Grundlage. Wichtig ist, dass du mindestens Überschriften und Absätze darin hast.

Aufgabe 1
Färbe verschiedene Texte der Webseite ein.
Aufgabe 2
Färbe auch Hintergründe ein.
Aufgabe 3
Wie kann man einer ganzen Seite eine Hintergrundfarbe geben?
Aufgabe 4
Welche weiteren Farbnamen (die HTML kennt) findest du noch? Nimm bitte drei Farben, die ungewöhnlich sind.
Aufgabe 5
Nenne zwei Farbkombinationen aus Vorder- und Hintergrundfarbe, die schlecht zu lesen sind.

Vertiefung

Aufgabe 6
Informiere dich zu <span>. Was macht man mit <span>?
Aufgabe 7
Worin besteht der Unterschied zwischen <span> und <p> bzw. <div>?
Aufgabe 8
Wie kann man einen einzelnen Buchstaben (z.B. das F von Ford) einfärben?
Aufgabe 9
Was meint man im Zusammenhang mit Farben mit "weniger ist mehr"?

Komplexe Aufgabe ohne KI

Erstelle auf Basis der Vorlage eine HTML-Datei mit einer Überschrift, einem Absatz und einer Auflistung mit mindestens drei Einträgen. Ändere bei mindestens 4 Elementen die Vorder- und Hintergrundfarbe. Ändere weiterhin bei einem Wort, das nicht allein steht, die Schriftfarbe.

Lasse dein Resultat vom Nachbarn oder der KI prüfen. Was waren deine beiden größten Fehler?

Zusammenfassung

Was muss man wissen/können?

Du kennst die style-Attribute color und background-color sowie einige Farbnamen. Du kannst verschiedene Elemente einfärben und hast ein Gefühl für die Farbwahl.

Was können anschließende Themen sein?

Natürlich kann man Farben noch viel genauer einstellen als über Namen. Das lernst du beim RGB-System.

Vorerst geht es aber um weitere wichtige CSS-Eigenschaften, um deine Webseite zu verschönern.

Weiter