CSS-Formate definieren
Elementen kann man Formate zuweisen, um die Schriftfarbe, Hintergrundfarbe, Schriftart, Rahmen und
Größe zuzuweisen, um nur einige zu nennen. Um Elemente diese CSS-Formate zuzuweisen, gibt es
drei Möglichkeiten, im head, body
und in einer seperaten *.css
-Datei.
Im folgenden Beispiel wird eine Seite mit der Untergrundfarbe braun body
, ein Kopf über eine
Überschrift der ersten Ordnung h1
und ein Abschnitt p
in der Schriftart Arial oder
Helvetica definiert.
<!DOCTYPE HTML>
<html lang="de">
<head>
<title>Meine erste Website</title>
<meta charset="utf-8">
<style type="text/css">
<!--
body {
background-color:#F4A460;
}
h1 {
font-size:24pt; font-style:italic; font-family:Arial, Helvetica;
background-color:#0000FF; color:#FFFF00;
border:6px double navy;
height:34px; text-align:center;
}
p {
font-size:16pt; font-family:Arial, Helvetica;
}
-->
</style>
</head>
<body>
<h1>Meine erste Homepage</h1>
<p>So könnte meine erste Homepage aussehen.</p>
</body>
</html>
Das ganze sieht so aus
Formate in einer separaten Datei definieren
Eine weitere Möglichkeit, um Stylesheet-Formate festzulegen, ist das Anlegen einer separaten Datei mit der
Dateierweiterung *.css (z.B. homepage.css). Der Head-Bereich sieht dann wie folgt aus:
<!DOCTYPE HTML>
<html lang="de">
<head>
<title>Meine erste Website</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="homepage.css">
</head>
<body>
<h1>Meine erste Homepage</h1>
<p>So könnte meine erste Homepage aussehen.</p>
</body>
</html>
Mit den Befehl <link rel="stylesheet" type="text/css" href="homepage.css">
wird die Datei festgelegt, in der die Formate festgelegt sind. Dieses hat den Vorteil, dass die Formate in allen Dateien
deines Projektes das gleiche aussehen geben können. Die Datei sieht in etwa so aus:
body {
background-color:#F4A460;
}
h1 {
font-size:24pt; font-style:italic; font-family:Arial, Helvetica;
background-color:#0000FF; color:#FFFF00;
border:6px double navy;
height:34px; text-align:center;
}
p {
font-size:16pt; font-family:Arial, Helvetica;
}
Das ganze sieht genauso aus, wie im ersten Beispiel
Formate im Body-Bereich definieren
Aber auch direkt im Body
-Bereich können CSS-Stylesheets festgelegt werden. Wenn Sie das oben
gezeigte Format beibehalten wollen, sieht der Code wie folgt aus:
<!DOCTYPE HTML>
<html lang="de">
<head>
<title>Meine erste Website</title>
<meta charset="utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body style="background-color:#F4A460;">
<h1 style="font-size:24pt; font-style:italic; font-family:Arial, Helvetica;
background-color:#0000FF; color:#FFFF00; border:6px double navy;
height:34px; text-align:center;">Meine erste Homepage</h1>
<p style="font-size:16pt; font-family:Arial, Helvetica;">
So könnte meine erste Homepage aussehen.</p>
</body>
</html>
Das ganze sieht genauso aus, wie im ersten Beispiel
Hinter den einleitenden HTML-Element wird das Attribut style=
notiert und in Anführungszeichen
eingeschlossen, dann die Eigenschaften und Werte gesetzt. Als Meta-Tag sollten noch mitteilen, dass Sie mit
CSS-Stylesheets arbeiten meta http-equiv="Content-Style-Type" content="text/css"
Formate für Klassen definieren
Sie können für gleiche Elemente verschiedene Formate definieren. Dabei legen Sie im head
-Bereich
oder einer separaten .css-Datei die Formate mit .name {Eigenschaft:Wert}
fest. Anwenden lassen sich die
Formate im leinleitenden HTML-Element mit den Attribut class="name"
.
Im folgenen Beispiel legt man für Abschnitte mehrere Klassen an:
<!DOCTYPE HTML>
<html lang="de">
<head>
<title>Meine erste Website</title>
<meta charset="utf-8">
...
<style type="text/css">
<!--
h1 { font-size:24pt; }
p { font-size:12pt; }
body { background-color:#FFFFCC;margin-left:100px; }
p.blue { font-family:Arial; color:#0000FF; }
p.red { font-family:Arial; color:#FF0000; }
.green { font-family:Arial; color:#00FF00; }
-->
</style>
</head>
<body>
<h1 class="green">Grüne Überschrift</h1>
<p class="blue">Dieser Abschnitt ist blau</p>
<p class="green">Dieser Abschnitt ist grün</p>
<p class="red">Dieser Abschnitt ist rot,
und hat ein grünes <span class="green">Wort</span></p>
</body>
</html>
Das ganze sieht dann so aus
Individualformate definieren
Individualformate werden mit dem Gitter # definiert und im HTML-Element mit den Attribut id
das Format
zugewiesen.
<!DOCTYPE HTML>
<html lang="de">
<head>
<title>Meine erste Website</title>
<meta charset="utf-8">
...
<style type="text/css">
<!--
body { background-color:#F4A460; }
h1 {
font-size:24pt; font-style:italic; font-family:Arial, Helvetica;
background-color:#0000FF; color:#FFFF00;
border:6px double navy;
height:34px; text-align:center;
}
p { font-size:16px; font-family:Arial, Helvetica; }
div#rot { border:6px double red; }
h2#urot { color:red; font-size:20px; }
#green { border:6px double green; }
#ugreen { color:green; font-size:20px; }
-->
</style>
</head>
<body>
<h1>Meine erste Homepage</h1>
<div id="rot">
<h2 id="urot">Rote Überschrift</h2>
<p>Dieses ist der rote Bereich</p>
</div>
<div id="green">
<h2 id="ugreen">Grüne Überschrift</h2>
<p>Dieses ist der grüne Bereich</p>
</div>
</body>
</html>
Das ganze sieht dann so aus
Vor dem Gatter # können Sie ein HTML-Element notieren. Würden Sie beim obengenannten Beispiel ein
div
mit den Namen id="urot"
definieren, so wird dieses ignoriert. Beachten Sie,
dass Individualformate nur einmal pro Seite definieren können.