Unsere CSS-Datei im Überblick

Meine "style.css" und damit auch die Lösung zum vorangegangenen Kapitel sieht nun so aus:

body
{
background-color: #FCF6CF;
font-family: Verdana, Arial, sans-serif;
font-size: 100.01%;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

h1
{
color: #000080;
text-align: center;
text-decoration: underline;
}

h2
{
color: #006400;
margin: 0;
}

h3
{
color: #ffb90f;
text-align: center;
background: #000080;
padding: 10px 0;
margin: 0;
}

#header
{
border-top: 3px solid #990000;
border-right: 3px solid #990000;
border-bottom: 3px double #003300;
border-left: 3px double #003300;
background: #FFCC00 url(banner1.gif) no-repeat center;
margin: 15px 15px 30px;
}

#navi
{
width: 180px;
margin-left: 15px;
font-size:0.9em;
float:left;
display: inline;
}

#content
{
border: 1px solid #8A2BE2;
margin: 0 15px 0 215px;
padding:15px;
text-align: justify;
font-size: 0.9em;
line-height: 1.5em;
}

/*--mit der folgenden Klasse "rotfett" können einzelne Wörter oder Textstellen rot und fett dargestellt werden--*/

.rotfett
{
color: #f00; /*--Schriftfarbe: rot--*/
font-weight: bold; /*--Fettschrift--*/
}

#navi ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navi a
{
display: block;
padding: 5px;
width: 170px; /*--wichtig für den IE 6--*/
text-decoration: none;
background-color: #FFCC00;
border-bottom: 2px solid #eee;
font-weight: bold;
}

#navi a:link
{
color: #0000CD;
}

#navi a:visited
{
color: #F00;
background-color: #C1CDCD;
}

#navi a:hover
{
color: #FFCC00;
background-color: #0000CD;
}

Natürlich brauchen wir jetzt auch noch weitere Seiten für unsere Homepage.


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: