Einstieg - Layout gestalten

Jeder hat seinen Stil

Die Webseite mit dem Steckbrief soll etwas mehr Pepp erhalten. Zugegeben, der folgende Vorschlag mit der Hintergrundfarbe orange ist etwas gewagt, aber warum nicht?

Formatierte Webseite

Stilangaben

Hierzu wird zunächst eine neue Datei mit Stilangaben erstellt.

body 
{
  background-color: orange; 
  color: black;
  font-size: small;
  font-family: Georgia, "Trebuchet MS", Verdana, sans-serif;
}

h1, em 
{
  font-weight: bold;
  font-style: normal;
}

h1 
{
  font-size: 200%;
}

em
{
  color: blue;
}

ul em
{
  color: red;
}

Diese Datei wird mit einem geeigneten Namen (hier style.css) an einem geeigneten Ort (evtl. im selben Verzeichnis wie der HTML-Quelltext; hier im Beispiel im Unterverzeichnis styles) abgespeichert.

Jetzt muss diese neue Datei mit dem HTML-Dokument verknüpft werden. Im Kopfteil des HTML-Dokuments wird hierzu eine neue Zeile eingefügt.

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    <title>Steckbrief von Bailey</title>
  </head>
  <body>
    ...
  </body>
</html>

Aufgabe

Versuche herauszufinden, was die Stilangaben oben bewirken. Verändere hierzu gezielt Angaben und beobachte, wie sich das Aussehen der Webseite ändert.

Quellen

X

Fehler melden

X

Suche