Seite 06 - CSS

Die Informationen zur Formatierung der Inhaltsseiten stehen in einer externen CSS-Datei. So gibt es eine 'zentrale' Stelle, wo all diese Informationen abgelegt sind. Möchte man eine Änderung vornehmen, muss man das lediglich in dieser StyleSheet-Datei und nicht in jeder einzelnen Seite tun.

Name: 'styles.css'

Allgemeine Angaben für die Seiten (body), Formatierungen für Verweise und Texte sind dort festgelegt. Interessant mag sein, das für die Inhalte von Tabellenzelle (td) und auch für die Überschriften (h1 - h5) eigene Angaben gemacht wurden.

So erreiche ich z.B. das die mit <h1> festgelegten Seitenüberschriften eine dünne Linie ober- und unterhalb des Textes haben. Wenn sie die CSS-Angaben für <td> näher betrachten, werden sie feststellen, dass der Zeilenabstand dort größer eingestellt wurde (130%). Das erzeugt ein klareres Bild für Textblöcke. Da die Seiteninhalte in diesem Beispiel ja innnerhalb einer Tabelle stehen, gilt diese Angabe generell für den dargestellten Text der Webseite.


body {
margin: 0px;
padding: 0px;

scrollbar-face-color: #FFD304;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #FFDF00;
scrollbar-3dlight-color: #CFF0CE;
scrollbar-darkshadow-color: #CFF0CE;
scrollbar-track-color: #FFD304;
scrollbar-arrow-color: #000000;

font-family : Verdana,Arial,Helvetica;
font-size:12px;
font-weight:normal;
color: #000000;
}



/* Verweise */

a {
font-family:verdana,arial,helvetica;
font-size:12px;
font-weight:normal;
text-decoration:none;
color: #000000;
}

a:visited {
color:#000000;
}

a:hover {
color:#000000;
}

a:aktiv {
color:#000000;
}


td {
font-family:verdana,arial,helvetica;
font-size:12px;
font-weight:normal;
text-decoration:none;
color: #000000;
line-height:1.3em;
}


h1 {
font-family:verdana,arial,helvetica;
font-size:16px;
color: #8F8F8F;
font-weight:bold;
padding:5px;
font-family:"Trebuchet MS",Tahoma,Arial,Helvetica,sans-serif;
background-color:#FFFFFF;
border-top:solid 1px #DFDFDF;
border-bottom:solid 1px #DFDFDF;
}

pre {
font-family: monospace;
font-size: 11px;
font-weight:normal;
text-decoration:none;
color: #222222;
line-height : 130%;
}


/* freie Klassen */

.ueberschrift {
font-family:verdana,arial,helvetica;
font-size:24px;
color: #009F00;
font-weight:bold;
}

.klein {
 font-family:Arial,Helvetica;
 font-size:9px;
 color: #FF7F00;
}