Stylesheet-Datei

Mit der Stylesheet-Datei wird das Aussehen unserer Homepage bestimmt. Für unser Projekt beschränken wir uns auf nur einige wenige Angaben.
Die Stylesheet-Datei ist eine Textdatei und kann deswegen auch mit jedem Editor bearbeitet werden.

Grundsätzlich wird einem html-Tag (z.B. body) Formatierungen zugewiesen. Die Formatierungsanweisungen werden zwischen { und } eingeschlossen. Jede Formatierungsanweisung wird durch ein ; (Semikolon) abgeschlossen. Die Formatierungsanweisung setzt sich zusammen aus der zu formatierenden Eigenschaft und, getrennt durch einen : (Doppelpunkt) dem Wert. Beispiel: color:#ffffff; color (engl. Farbe) = Schriftfarbe und #ffffff (weiß) = Farbwert als Hexadezimale RGB-Farbangabe. Bei Selfhtml findet sich eine Angabe zu den Werten für Farben. Die meisten Grafikprogramme können Farbwerte mit Hilfe der Pipette (oder Farbwähler oder einer sonstigen Funktion) als Hexadezimale RGB-Farbangabe ausgeben.

Eine sinnvolle Einteilung einer Stylesheet-Datei ist: Oben ein Kommentar mit wichtigen Angaben wie die URL (URL uniform resource locator, engl. Internetadresse) für die diese Datei erstellt wurde, dem Autor, sowie dem Datum, und wichtige Angaben, die sich auf die Formatanweisungen beziehen, z.B. Farbangaben.
Dann folgt ein Block mit Angaben zum Layout (engl. Anordnung, Gestaltung) (div-Bereiche der Homepage).
Daran anschliessend wird den verwendeten und zu formatierenden HTML-Tags die Formatierung zugewiesen.

/* StyleSheet-Datei für URL (z.B. people.freenet.de/DEINNAME)
Erstellt von DeinName am DATUM
Angaben zu Farben:
Hintergrund-Body: #686565;
Hintergrund-Inhalt, Navi und Fuss:#5e6061
Schriftfarbe : #909395
*/

body
{
background-color:#686565;
color:#ffffff;
margin:20px;
}
/* Hintergrund in Grau und ein Randabstand von 20px */

.logo
{
text-align:center;
}
/* Das logo wird mittig ausgerichtet. Mit <div class="logo"> und </div> das Logo umschliessen. */

.navi
{
text-align:center;
background-color:#5e6061;
}
.inhalt
{
text-align:left;
background-color:#5e6061;
color:#ffffff;
padding:20px;
}
/* Der Inhalt wird links ausgerichtet (ist Standard) und es wird eine dunkelere Farbe genommen. */

.fuss
{
background-color:#5e6061;
text-align:center;
}


h1, h2, h3, h4, h5, h6, p
{
color:#909395;
background:transparent;
}
/* Textfarbe wird festgelegt */

a
{
letter-spacing:2px;
background:transparent;
text-decoration:underline;
}

a:link
{
color:#000000;
}

a:visited
{
color:#303132;
}

a:hover
{
color:#f0f0f0;
}
a:active
{
color:#6d6f71;
}

/*Die Farben und Eigenschaften der Links */


Diese Datei im Verzeichnis css als stylesheet.css abspeichern.

Mit /* wird innerhalb einer StyleSheet-Datei ein Kommentar eingeleitet. Beendet wird der Kommentar mit */ .
Hinter body sind die Eigenschaften für das html-Tag body festgelegt worden (Hintergrundfarbe, Schriftfarbe und Randabstand).
.logo, .navi, .inhalt und .fuss legt die Eigenschaften für unsere Layer (und damit das Grundgerüst unseres Layouts) fest.
h1, h2, h3, h4, h5, h6, p bestimmt die Eigenschaften von Überschriften (h1-h6) und Absätzen (p).
Mit a a:link, a:visited, a:hover und a:active wird das Verhalten der Links festgelegt.

Dieses sind natürlich nur die "minimalistischten" Einstellungen für unser Projekt.

Wenn wir jetzt unsere vorlage.html im Browser aufrufen, so sollte man eine Änderung bemerken.

Niemand ist sich bestimmt darüber klar, das bis hierhin schon die meiste Arbeit an unserem Homepage-Projekt erledigt ist.