Schriften und Überschriften

Der Text sieht noch ziemlich mickrig aus. Statt der üblichen Times wollen wir besser die schnörkellose Verdana als Schriftart verwenden. Natürlich könnt ihr auch eine andere Schriftart wählen. Die sollte aber gängig sein, so dass sie möglichst jeder Besucher auf seinem Rechner installiert hat. Ansonsten wird sie nicht angezeigt. Wir ergänzen also unsere Body-Angaben mit der Schriftart, die wir als "font-family" bezeichnen. Sollte eine gewählte Schriftart auf anderen Rechnern einmal nicht installiert sein, so kann man gleich Ersatzschriften mitliefern oder auf die "Schriftfamilie" verweisen.

Also schreiben wir entweder

font-family: Verdana;

oder

font-family: Verdana, Arial, sans-serif;

Dies bewirkt, dass eine beliebige, serifenlose Schriftart verwendet wird, falls weder Verdana noch Arial installiert sein sollten. Die dann verwendete Schriftart muss jedoch nicht unbedingt ähnlich zu Verdana oder Arial sein.

Die generelle Schriftgröße stellen wir ebenfalls gleich im Body ein. Üblicherweise verwendet man dafür einen Wert von 100%, was der Browsereinstellung des Benutzers entspricht. Hat dieser keine Änderungen an der Standardschriftgröße vorgenommen, entspricht dies 16px. Zu dieser Basis können wir dann später mit einer relativen Größeneinheit die Schriftgröße in unseren einzelnen Seitenelementen festlegen. Aufgrund einiger Browserbugs in verschiedenen Browsern sollte man jedoch besser 100.01% verwenden.

Bereits an dieser Stelle sei erwähnt, dass man für manche Browser, insbesondere den Internet-Explorer kleiner 7 manchmal einige Spezialangaben machen muss, damit auch sie den an sich standardkonformen CSS-Code richtig umsetzen. Das ist nicht gerade logisch. Nimmt man darauf jedoch keine Rücksicht, so führt dies zu einer abweichenden Darstellung unserer Homepage in verschiedenen Browsern und das wollen wir möglichst vermeiden.

Wichtig:
Achtet immer darauf,

Schreibt also nicht 100,01 % sondern 100.01%. Irgendwann werdet ihr euch wundern, wenn eine Wertangabe einmal nicht dargestellt wird. Meist liegt der Fehler dann an einem Leerzeichen zwischen Wert und Einheit oder eben an einem Komma statt Punkt.

Exkurs

Weil wir gerade beim Body sind, schreiben wir - ebenfalls um wieder ein einheitliches Browserverhalten zu gewährleisten - noch folgende Angaben hinzu (auf die Bedeutung dieser Eigenschaften wird später noch eingegangen):

width: 100%;
height: 100%;
margin: 0;
padding: 0;

Somit ergänzen wir body um folgende Angaben:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Meine erste CSS-Seite</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type ="text/css">
body
{
background-color: #EBECE4;
font-family: Verdana, Arial, sans-serif;
font-size: 100.01%;
width: 100%;
height: 100%;
margin: 0;
padding: 0
}
</style>
</head>
<body>
Meine erste CSS Seite
</body>
</html>

Exkurs Ende

Sofern ihr die Angaben wie vorgegeben erfasst habt, sollte euch etwas aufgefallen sein: Am Ende des Wertes für "padding" fehlt nach der "0" das Semikolon. Man kann darauf bei der jeweils letzten Style-Angabe eines Elements verzichten (aber nur beim letzten!). Da wir nicht ausschließen können, dass wir noch weitere Angaben einfügen, setzen wir zur Sicherheit auch hier noch am Ende besser ein Semikolon.

Merke:
Einige Angaben, die wir dem Body zuweisen, wie hier Schriftart und Schriftgröße gelten grundsätzlich (von einigen Spezialtags wie z.B. Überschriftengröße abgesehen) für alle weiteren Elemente. Man spricht deshalb von "Vererbung". Es ist deshalb nicht erforderlich, diese Angaben - sofern sie identisch sind - in weiteren Elementen zu wiederholen.

Nun wollen wir die Überschrift noch etwas aufpeppen. Dafür gibt es die sechs Hierarchien "h1 bis h6". Verwenden wir "h1" und fügen zunächst die Überschrift ins Element ein:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Meine erste CSS-Seite</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type ="text/css">
body
{
background-color: #EBECE4;
font-family: Verdana, Arial, sans-serif;
font-size: 100.01%;
width: 100%;
height: 100%;
margin: 0;
padding: 0
}
</style>
</head>
<body>
<h1>Meine erste CSS Seite</h1>
</body>
</html>

Sieht zwar schon etwas besser aus, aber noch nicht zufriedenstellend. Wir bessern durch CSS etwas nach indem wir zusätzlich die Überschrift h1 formatieren. Nehmen wir an, sie soll dunkelblau und zentriert sein.

Für die Schriftfarbe verwenden wir "color" und für die Textausrichtung "text-align". Unsere Style-Angaben ergänzen wir wie folgt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Meine erste CSS-Seite</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type ="text/css">
body
{
background-color: #EBECE4;
font-family: Verdana, Arial, sans-serif;
font-size: 100.01%;
width: 100%;
height: 100%;
margin: 0;
padding: 0
}

h1
{
color: #000080;
text-align: center;
}

</style>
</head>
<body>
<h1>Meine erste CSS Seite</h1>
</body>
</html>

Ihr hättet die Überschrift gerne rechts platziert? Dann nehmt statt "center" einfach "right".

Immer noch nicht ganz zufrieden? Dann unterstreicht doch die Überschrift mit text-decoration: underline;

Probiert mal einige Sachen selbst aus. Hier findet ihr alles weitere über die möglichen Texteigenschaften

Der nächste Teil unseres Kurses heißt "CSS-Styleangaben zentral einbinden".


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: