i

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. Du kannst dazu in den Fenstern unterhalb den CSS-Quelltext (das sind die Stilangaben) anpassen. Beobachte auf der Website (ganz unten), wie sich das Aussehen ändern.

Alternativ kannst du auch auf deinem eigenen Rechner arbeiten: Alle Ausgangsdateien mit dem richtigen "Dateibaum" kannst du hier (gepackt) herunterladen und in ein Verzeichnis auspacken (in der Regel mit einem rechten Mausklick auf die .zip-Datei, "Alle extrahieren").

Quellen

Suche

v
1.1.4.1
www.inf-schule.de/information/informationsdarstellunginternet/formatierungcss/einstieg_layout
www.inf-schule.de/1.1.4.1

Rückmeldung geben