Hauptmenü

05 - Etwas Stilvoller

Im vorangegangenen Kapitel haben wir die ersten Schritte mit Cascading Style Sheets, kurz CSS, unternommen. Dazu haben wir kurze Textbereiche mittels des <span style="..."> </span> mit etwas Farbe versehen. Wir haben die ersten CSS-Attribute color und background-color kennengelernt.

Inline Styles

Wir haben gesehen, dass wir HTML-Tags im Quelltext unserer Webseite mit dem style-Attribut erweitern können und diesem als Wert eine Reihe von CSS-Anweisungen übergeben können.

Wir nennen diese Art, CSS-Informationen anzubringen, Inline-Styles.

Zentrale Stilregeln

Hier könnte ich jetzt viel schreiben. Ich bitte Euch statt dessen diese Seite auf selfhtml.org durchzulesen und durchzuarbeiten.

Dazu müsst Ihr noch die grundlegenden Selektoren verstehen. Da die CSS-Informationen ja nicht mehr unmittelbar dor stehen, wo sie ihre Wirkung entfalten sollen, müssen wir das kenntlich machen. Hier ist ein Beispiel mit den drei grundlegenden Selektoren:

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beschreibung der Seite</title>
    <style>
      h1, h2 {
        color:red;
        font-family:sans-serif;
      }
      .tiername{ ... }
      .tiergeraeusch { ... }
      #erster_reim { ... }
    </style
  </head>
  <body>
    <p>Inhalt der Seite</p>
  </body>
</html>
  1. Durch das einfache Hinschreiben eines Tag-Namens könnt Ihr Anweisungen feshalten, die für alles gelten soll, das innerhalb eines solchen Tags steht. Wie Ihr seht, könnt ihr auch mehre Tags gleichzeitig gestalten. Das gilt auch für die anderen Selektoren.
  2. Mit einem initialen Punkt benennt ihr Klassen. Diese Anweisungen beziehen sich auf HTML-Elemente, die der Klasse zugeordnet werden. Das geschieht mit dem Attribut class, z.B.

    <span class="tiername"> ... </span>

    Tags einer bestimmten Klasse dürfen beliebig oft vorkommen.
  3. Mit der Raute/Hash am Anfang definiert Ihr IDs. Im HTML-Text sprecht Ihr sie so an:

    <span id="erster_reim"> .... </span>

    Jede ID darf im HTML-Quelltext genau einmal vorkommen.

Aufgabe

Gestaltet die HTML-Datei mit unserem Gedicht so um, dass ihr keine Inline-Styles mehr verwendet sondern an zentraler Stelle, nämlich innerhalb des <style> </style> Tags im HTML-Head alle Vorgaben zur Gestaltung Eurer Webseite und des Textes vornehmt.

 

Zusatzaufgabe

Informiert Euch auf selfhtml.org über die Möglichkeiten der Schriftgestaltung. Zum Beispiel auf dieser Seite. Setzt das dort erworbene Wissen in Eurem Gedicht um.