Gestalten, Verändern und Auslagern → CSS Kapitel 1

Wer anfängt sich mit html auseinander zu setzten stößt irgendwann unweigerlich darauf, dass man etwas gestalten möchte. Um dies zu tun kann man natürlich jede Kleinigkeit im Quelltext verändern, aber es gibt auch die Möglichkeit CSS zu benutzen. CSS (Cascading Style Sheets) bietet dabei die Möglichkeit bestimmte Formatierungen festzulegen und sie im Header des Dokuments oder in einer ausgelagerten CSS Datei (was die bessere Lösung darstellt) anzugeben. Dieses Tutorium soll erklären wie ihr das anstellt.
Genereller Aufbau: Zunächst einmal wird ein CSS Befehl volgendermaßen dargestellt:
name {
befehlsname: merkmal;
befehlsname: merkmal;
}
Möchte man nun zum Beispiel angeben welche Frabe der Hintergrund des Dokuments haben soll, so wie die Schriftart, die Farbe der Schrift und die Schriftgröße, so würde dies folgendermaßen aussehen:
body {
background-color: #CACACA;
font-family: impact;
color: #000000;
font-size: 12pt;
}
und so umgesetzt wird:
Hier der Text in eurem Dokument
CSS Einbauen: So, jetzt kennt ihr also den Grundaufbau, aber wo kommt das denn jetzt hin? Wie schon angesprochen gibt es zwei Möglichkeiten.
1. Im html/ xhtml/ php... Dokument selbst
2. In einer CSS Datei

In den Header mit CSS: In der ersten Möglichkeit sieht euer Header mit den CSS Angaben folgendermaßen aus:

<html>
<head>
<title>Hier steht der Titel</title>

<style type="text/css">
body {
background-color: #CACACA;
font-family: impact;
color: #000000;
font-size: 12pt´;
}
</style>

</head>
<body>
Hier der Text in eurem Dokument
</body>
</html>

Wenn ihr ein bestimmtes Dokument formatieren wollt, dann ist es durchaus okay CSS in den Header zu packen aber besser ist es auszulagern

CSS aulagern: Ihr öffnet ein neues Dokument, welches ihr unter NAME.css abspeichert. Dort könnt ihr nun alle CSS Befehle eintragen. das kann dann so aussehen:

body {
background-color: #CACACA;
font-family: impact;
color: #000000;
font-size: 12pt;
}

b {
color: #00C200;
font-size: 12pt;
}

i {
color: #00C200;
font-size: 20pt;
}

Damit hättet ihr jetzt eure CSS Datei. Um diese mit html/ xhtml/ php... zu verknüpfen öffnet ihr nun eure Datei und gibt dort folgendes vor den Titel in euren Header ein:
<link rel="stylesheet" type="text/css" href="NAME.css" />

Und voilá ihr habt CSS ausgelagert.

[Was die einzellnen Befehle genau bedeuten und was es noch für Möglichkeiten gibt erfahrt ihr in Kapitel zwei.]

Und warum jetzt auslagern? Den link zur CSS Datei könnt ihr nun in jede html/ xhtml/ php... Datei einbauen, welche die gleichen Formatierungen haben soll. Zudem braucht ihr, wenn ihr die Formatierungen ändern wollt nur die CSS Datei abändern.
WICHTIG: Achtet darauf, dass eure CSS Datei und euere html/ xhtml/ php... Datei im gleichen Verzeichnis sind, bzw, dass der Verweis auf das Verzeichnis mit der CSS Datei richtig ist (sonst funktioniert es nicht!!).