CSS - Cascading Style SheetsHTML CSS Grundlagen

Cascading Style Sheets werden zur Formatierung von HTML (und XML) benutzt. Sowohl für Schriftgrößen und -farben als auch zur Positionierung von Inhalts-Containern (<div></div>).

Bei Wikipedia gibt es eine kurze Abhandlung über CSS.

Style Sheets können auf drei Arten eingesetzt werden: direkt im Quelltext der Seite in den HTML-Tags, im Kopfbereich der HTML-Seite oder als externe Datei. Auch Kombinationen sind möglich.

Sehen wir uns die drei Möglichkeiten an:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<h1 style="color:red">Einfache Formatierung ...</h1>
<p style="font-family:times,serif;font-size:26px;font-style:italic">... mit Cascading Style Sheets</p>
</body>
</html>

Hier wird die Überschrift <h1> rot gefärbt, der Text in der Schrift "times" mit der Größe 26px kursiv ausgegeben.

Ansehen!

Das könnte man auch so schreiben:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
h1 {
color:red
}
p {
font-family: Times, serif;
font-size:26px;
font-style:italic
}
-->
</style>
</head>
<body>
<h1>Einfache Formatierung ...</h1>
<p>... mit Cascading Style Sheets</p>
</body>
</html>

Da hier die Formatierung im Kopf des Dokumentes steht, gelten die Anweisungen für alle HTML-Tags des Dokumentes.

Ansehen! (man sieht keine Änderung zur vorigen Seite)

Die häufigste Version ist die, die das CSS in einer externen Datei auslagert, womit man dann alle Dateien einer Website sehr einfach anpassen kann:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Einfache Formatierung ...</h1>
<p>... mit Cascading Style Sheets</p>
</body>
</html>

Die entsprechende CSS-Datei (css1.css) sieht so aus:

h1 {
color:red
}
p {
font-family: Times, serif;
font-size:26px;
font-style:italic
}

Ansehen! (man sieht keine Änderung zu den vorigen Seiten)

Weiter: Ein Grundlayout

·· PhiloPhax · Schwarzwald.net · Reiserat ·
· Schnelladende Layouts · Webtaugliche Texte · Suchmaschinenoptimierung · Bildbearbeitung fürs Web · Wordpress ·
· Holzgerlingen liegt bei Böblingen zwischen Stuttgart und Tübingen an der B 464