Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

5.4 Hintergrund- und Schriftfarben definieren

Im ersten Schritt definieren Sie die Hintergrund- und Schriftfarben für body und danach für den »Schutzumschlag« <div id="wrapper">.

Hintergrund- und Schriftfarbe für body

Das folgende ToDo gestaltet Schrift- und Hintergrundfarbe für das Element body. Um ein Element zu gestalten, müssen Sie es im CSS zunächst auswählen, und dazu schreiben Sie einfach den Namen des Elements hin, also schlicht und einfach body. Die gewünschten Gestaltungsanweisungen dann zwischen geschweiften Klammern.

Es ist übrigens beim Schreiben der Styles eine ziemlich gute Angewohnheit, die schließende geschweifte Klammer direkt nach der öffnenden zu schreiben. Dann vergisst man sie nicht so leicht.

Die Hintergrundfarbe eines Elements wird mit der CSS-Eigenschaft background-color gestaltet, die Eigenschaft für die Schriftfarbe heißt einfach nur color und nicht text-color oder font-color.

ToDo: Schrift- und Hintergrundfarbe für body gestalten
  1. Schreiben Sie die folgenden Zeilen unterhalb des Kommentars. Die /* Kommentare */ am Ende der Zeile dienen lediglich zur Erläuterung und müssen nicht abgetippt werden:

    /* Gestalte das HTML-Element mit dem Namen body */
    body {
      background-color: #8c8c8c; /* Hintergrundfarbe */
      color: white; /* Schriftfarbe */
    }

  2. Speichern Sie das Stylesheet und betrachten Sie die beiden Webseiten
    (nicht das Stylesheet!) in einem Browser.

Nach diesem Schritt sieht die Startseite im Browser ungefähr so aus:

Abbildung 5.1: body mit grauer Hintergrundfarbe und weißer Schrift
Abbildung 5.1: body mit grauer Hintergrundfarbe und weißer Schrift

Nicht besonders hübsch, aber die Veränderung ist deutlich zu sehen.

Ein Wort noch zur Definition von Farben: Hexadezimale Farbangaben wie #8c8c8c kennen Sie vielleicht bereits aus HTML, aber in CSS dürfen Sie für einige Farben englische Farbnamen wie white oder black benutzen. Mehr dazu erfahren Sie im Abschnitt Farben definieren.

Hintergrund- und Schriftfarbe für div#wrapper

Um den »Schutzumschlag« <div id="wrapper"> innerhalb von body zu gestalten, müssen Sie im CSS zunächst wieder den Namen des Elements hinschreiben: »Das div-Element mit der ID wrapper« heißt in CSS div#wrapper.

ToDo: Schrift- und Hintergrundfarbe für #wrapper gestalten
  1. Schreiben Sie die folgenden Zeilen unterhalb des Styles für body:
    /* Gestalte das div mit id="wrapper" */
    div#wrapper {
      background-color: white;
      color: black;
    }
  2. Speichern Sie das Stylesheet und betrachten Sie die beiden Webseiten
    im Browser.

Wenn alles geklappt hat, sind Start- und Kontaktseite jetzt wieder etwas besser lesbar:

Abbildung 5.2: body in Grau, #wrapper in Weiß
Abbildung 5.2: body in Grau, #wrapper in Weiß

Der Text sitzt sehr dicht am Rand, und auch sonst ist die Seite noch nicht besonders hübsch, aber es ist ein Anfang.

Vielleicht ist Ihnen aufgefallen, dass die für body mit der Eigenschaft color definierte Schriftfarbe auf der Seite gar nicht benutzt wird, weil der gesamte Text innerhalb von div#wrapper steht und deshalb schwarz wird. Es ist aber eine gute Angewohnheit, Schrift- und Hintergrundfarbe immer zusammen zu definieren, damit sich nicht durch seltsame Zufälle unbeabsichtigte Kombinationen wie »weiße Schrift auf weißem Grund« ergeben.

Übrigens: Da die ID wrapper auf jeder Webseite nur ein einziges Mal vorkommen darf, können Sie das div davor auch weglassen und einfach nur #wrapper schreiben, aber zumindest am Anfang ist es mit dem div davor deutlicher. Mehr über IDs erfahren Sie in Kapitel 6 im Abschnitt "Eigene Namen vergeben: ID und class".

Die doppelte Rolle der Raute (#)

Das Rautenzeichen # (engl.: Number sign) hat in unserem Alltag viele unterschiedliche Namen und Bedeutungen, so auch im CSS:

  • Vor den geschweiften Klammern steht im Beispiel div#wrapper. Hier heißt das Rautenzeichen »Gestalte das div-Element mit dem Attribut id="wrapper"«.
  • Innerhalb der geschweiften Klammern findet sich die Zeichenfolge background-color: #8c8c8c. Das Rautenzeichen vor einer Farbangabe bedeutet lediglich »Es folgt ein hexadezimaler Wert«.

Hintergrund- und Schriftfarben im Kopfbereich

Der auf beiden Webseiten vorhandene Kopfbereich <div id="kopfbereich"> soll ebenfalls eine Hintergrundfarbe bekommen, und wie eben gesehen definieren Sie die Schriftfarbe gleich mit. Danach erscheint der Kopfbereich auf beiden Seiten in einem gelborange Ton.

ToDo: Eine Hintergrundfarbe für den Kopfbereich definieren
  1. Fügen Sie am Ende des Stylesheets folgende CSS-Regel ein:

    div#kopfbereich {
      background-color: #f3c600; /* Gelb-Orange */
      color: black;
    }

  2. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im
    Browser.

Die Logo-Grafik ist ein transparentes GIF-Bild und wurde für einen weißen Hintergrund optimiert. Deshalb ist bei dem etwas dunkleren Hintergrund momentan um die Buchstaben herum ein leichter
»Heiligenschein« zu sehen. Per CSS können Sie dem HTML-Element img einen weißen Hintergrund geben, der dann im Browser sichtbar wird, weil das Logo wie gesagt transparent ist.

Die Grafik hat im HTML die ID logo bekommen:

<img src="logo.gif" id="logo" alt="Little Boxes" width="222" height="32" />

Im CSS können Sie das Logo deshalb ganz einfach mit img#logo selektieren und anschließend gestalten.

ToDo: Eine Hintergrundfarbe für die Grafik im Kopfbereich definieren
  1. Fügen Sie am Ende des Stylesheets folgende CSS-Regel ein:

    /* Gestalte die Grafik mit id="logo" */
    img#logo {
      background-color: white;
      color: black;
    }

  2. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im
    Browser.

Und so sieht der Kopfbereich der Beispielseiten jetzt im Browser aus:

Abbildung 5.3: Kopfbereich und Grafik mit Hintergrundfarbe
Abbildung 5.3: Kopfbereich und Grafik mit Hintergrundfarbe