Einführung in Cascade StyleSheets - CSS Grundlagen

Die Ausführung der Anweisungen ist recht einfach zu erlernen und gut reproduzierbar. Die Probleme fangen erst dadurch an, dass der Internet Explorer häufig noch in älteren Versionen zu finden ist, der noch nicht alle Elemente unterstützt. Für diese Problematik gibt es drei Lösungswege:

Man arbeitet mit sehr einfachen Stylesheet Anweisungen, die alle Browser verstehen

Die doppelte Seitenführung (meiner Meinung nach die schlechteste)

Die doppelten Stylesheet Dateien (vielleicht ein Kompromis)

Ich persönliche ziehe es vor mit einfachen Anweisungen zu Arbeiten und die Hoffnung nicht aufzugeben, dass sich die Problematik früher oder später von alleine erledigt. Wenn ich meine Statistiken der letzten Jahre so ansehe, ist IE < Version 9 wohl oder übel der Verlierer (derzeit nur noch 10% der Besucher).

Soviel zur Theorie, jetzt schreiten wir zur Praxis, dabei werde ich mehr mit Beispielen arbeiten, als alles gross und breit zuerläutern.

Als erstes zeige ich verschiedene Möglichkeiten Style Sheets einzubinden.

Externe Datei mit den Namen „sample.css“. Speichern sie diesen Quelltext als “ css-sample00.htm“.

<html>
<head>
<title>Meine erste Seite mit Stylesheet </title>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<html>
<body>
<h1>Testseite</h1>
</body>
</html>

Den folgenden Text speichern wir als “ css-sample.css“.

h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-style: normal;
	color: #FF0000;
	background-color: #FFFFCC;
	text-align: center;
	border-top: inset;
	border-bottom: inset;
	position: relative;
}

Hier die Webseite mit integriertem Style Sheet. Diesen Quelltest speichern wir als “ css-sample01.htm“.

<html>
<head>
<title>Meine erste Seite mit Stylesheet </title>
<style type="text/css">
<!--
h1 {font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 24px;
  font-style: normal;
  color: #FF0000;
	background-color: #FFFFCC;
	text-align: center;
	border-top: inset;
	border-bottom: inset;
	position: relative;
}
-->
</style>
</head>
<body>
<h1>Testseite</h1>
</body>
</html>

Für kurze Anweisungen z.B. eine Farbzuweisung kann man diese auch direkt einbinden.

<html>
<head>
<title>Meine erste Seite mit Stylesheet </title>
</head>
<body>
<h2 style="color: #FF0000; text-align: center;">
Test&uuml;berschrift</h2>
</body>
</html>

Das sieht dann so aus:

Testüberschrift

Dann wäre noch die Import Funktion zu nennen, diese wird von neueren Browsern unterstützt.

<html>
<head>
<title>Meine erste Seite mit Stylesheet </title>
<style type="text/css">
@import url(style.css);
</style>
</head>
<html>
<body>
<h1>Testseite</h1>
</body>
</html>