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?
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
- Foto: Bailey - Urheber: Klaus Becker - Lizenz: CreativeCommons BY-SA 3.0