29.11.2005

Einführung in CSS - Teil 1

Wer schon einmal eine Homepage erstellt hat, kennt das Problem: Der Code wird spätestens bei den Designanpassungen (Schriften, Hintergrundbilder,...) unübersichtlich und vor allem schwer wartbar. Das kommt daher, weil das "Was?" (Was wird angezeigt?) und das "Wie?" (Wie wird es angezeigt?) im HTML vermischt vorliegen.
Die Lösung aus der Misere: Cascading Style Sheets, von Freunden "CSS" genannt.

Ein Beispiel. Nachfolgend eine Demonstrationsseite (das unter CSS-Jüngern alseits bekannte "CSS Zen Garden Projekt") in reinem HTML.

Demo-Seite

Hier ist lediglich das "Was?" hinterlegt. Da CSS extern das "Wie?" übernehmen kann, können mit zwei unterschiedlichen CSS-Dateien ein und die selbe HTML auf vollkommen unterschiedlichen Wegen interpretiert werden.

Beispiel 1
Beispiel 2


Diese Beispiele haben beide ein und dieselbe HTML-Datei, die Texte sind identisch, aber durch CSS wird da Layout vollkommen anders dargestellt.

Ein erster Schritt:

Nehmen wir einmal folgenden HTMLcode zur Grundlage:

<html>
<head>
</head>
<body>
<h3>Ein erster Test</h3>
Mit ein kleinwenig Text
</body>
</html>

Zeigt man diesen Code im Browser an, wird einfach eine Überschrift mit etwas Text abgebildet:


Ein erster Test


Mit ein kleinwenig Text


Langweilig, oder? Passen wir doch ein wenig die Schrift an. Wir schreiben eine Datei test.css:

body {
font: normal 10px/1.6em "Lucida Grande", "Verdana", sans-serif;
}

h3 {
color: red;
}

Dem aufmerksamen Betrachter fällt auf, dass vor den {}-Klammern jeweils ein HTML-Tag steht. In den Klammern werden dann Anpassungen für diesen Tag implementiert. Wenn wir also wollen, dass sämtliche h3-Überschriften auf unserer Website rot sind, müssen wir lediglich das obenstehende css-File einbinden.
Hierfür müssen wir im <head>-Abschnitt folgenden Code hinzufügen:

<link rel="stylesheet" type="text/css" href="test.css" />


Das Ergebnis mit CSS:
hier klicken

Demnächst mehr!

Keine Kommentare: