HTML Schnellstart / HTML Schnellstart Modul 4
0%
In Bearbeitung

CSS Hintergrundfarbe ändern

Während dieses Kurses hast du dich bestimmt schon gefragt, wie du das Design der Webseite mit Farben, Schriftgrößen usw. ändern kannst, richtig?

Einen Teil davon haben wir bereits im letzten Modul gesehen, als wir uns mit dem Layout beschäftigt haben. Dort da haben wir das style-Attribut verwendet. Du sollst jetzt lernen, was du eigentlich mit dem style-Attribut machen kannst.

CSS und das style-Attribut

Mit dem style-Attribut kannst du CSS-Code für das jeweilige Element festlegen. CSS habe ich im 1. Modul dieses Kurses kurz angesprochen. Damit kannst du das Aussehen der HTML-Elemente auf deiner Webseite beeinflussen.

Hintergrundfarbe ändern

Wir ändern jetzt die Hintergrundfarbe eines div-Elements. Dafür nutzen wir die background-color Eigenschaft in CSS. Dieser geben wir einen Farbwert z.B. "LightGrey".

Das ganz sieht so im style-Attribute aus:

style="background-color:LightGrey"

Setzt du dieses Attribut in ein HTML-Element, ändert sich die Hintergrundfarbe:

<div style="background-color:LightGrey">

  <p>Das sieht nach Lichtgrau aus.</p>

</div>
Code ausprobieren ×

Wie CSS im Detail funktioniert, kannst du auf lerneProgrammieren.de lernen. In diesem Schnellstart-Kurs bekommst Du nur einen kleinen Einblick in CSS.

CSS ist eine eigene Sprache mit vielen Einstellmöglichkeiten. Du kannst im Prinzip jedes Element individuell gestalten.