Deine erste Homepage
Kapitel 9
Das Aussehen mit CSS gestalten

Das Aussehen der Seite, Eigenschaften wie Farben, Schriftarten und -größen, Rahmen usw. haben wir bisher überhaupt nicht beachtet.

Dafür ist CSS (Cascading Style Sheets) zuständig.
CSS ist eine Stylesheet-Sprache für strukturierte Dokumente, also für HTML.
CSS ist sehr mächtig, und hat eigene Regeln und eine eigene Syntax. Wir wollen im Moment hier nicht auf die Details dieser Sprache eingehen. Bei Interesse kannst du bei Wikipedia und natürlich bei Selfhtml schon einmal nachlesen.

Damit du aber den Lohn deiner bisherigen Bemühungen um sauberen, strukturierten Code ernten kannst, binden wir einfach eine fertige vorbereitete CSS Datei ein.

Die CSS Datei:


/* erst einmal alle default Werte setzen */
html,body, p, a, h1,h2,h3,h4,h5,ul,ol,form,img,li, fieldset, label, legend, textarea {
font-family: Verdana, Geneva, Arial, sans-serif;
border:0;
margin:0;
padding:0;
color: #ff7;
color:#eee;
line-height:1.6em;
letter-spacing: 1px;
}

html {
background: #004;
}

body {
font-size: 100.01%;
text-align:center;
}

p {
margin: .5em 0 1.5em 0;
}

h1 {
font: small-caps bold 1.5em Times, "Times New Roman", serif;
letter-spacing: 3px;
margin: 0 0 1.5em 0;
color: #ff7;
}

h2, h3 {
font: small-caps bold 1.3em Times, "Times New Roman", serif;
letter-spacing: 3px;
margin: 3em 0 1em 0;
color: #ff7;
}

ul {
margin: 1em;
}

ol {
margin: 1em 0;
list-style-position:inside;
}



#main{
width: 47em;
text-align:left;
margin: 2em auto;
}

#inhalt {
float:left;
width: 30em;
background: #222;
border: 1px solid #666;
margin: 1em 0;
padding: 1em 1em 0;

}

#inhalt li {
padding: .3em;
}


#footer {
clear:left;
font-size: .9em;
}


/* Navigation */
#navi {
width: auto;
margin: 0 0 0 33em;
padding-top: 2em;
}


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


#navi li {
margin: .4em 0;
border: 1px solid #666;
font-size: .85em;
background: #333;
}

#navi li a {
text-decoration:none;
display:block;
padding: 0 .2em 0 2.3em;
text-indent: -1.7em;
}

#navi h2,
#navi li,
#navi li a {
color:#eee;
}

#navi h2 {margin: 0 0 .5em 0;}

.current {
display:block;
padding: 0 .2em 0 2.3em;
text-indent: -1.7em;
color:#ff7;
background:#000;
}
/* Ende Navigation */


/* Links beim Mouseover und beim Tabben kennlich machen */
a:link, a:visited {
color: #ff7;
}

a:hover, a:active, a:focus {
color:white;
background:#000;
text-decoration:none;
}
/* Ende Links */

Bitte kopiere den ganzen obigen Quelltext (zuerst mit Strg+A alles markieren!) in eine neue Datei.
Diese Datei speicherst du unter dem Namen style.css, und lädst sie auf deinen Server hoch.
Wenn du alles richtig gemacht hast, und auch das vorherige Kapitel fehlerlos erledigt hast, dann sollte deine Homepage jetzt im gleichen Design wie dieses Tutorial erscheinen.
Wenn du dich streng an unsere Beispiele gehalten hast, dann kannst du dir auch diese Musterseite zum Vergleich anschauen

Anmerkung:
Auf der Musterseite funktioniert die Navigation nicht.

Was haben wir in dieser Lektion gelernt?

Für das Aussehen einer HTML-Seite ist CSS zuständig.

Anmerkung:
Wenn du dich jetzt schon näher mit CSS beschäftigen willst: ein Tutorial

Deine erste HomepageKapitel 9Das Aussehen mit CSS gestalten

Was haben wir in dieser Lektion gelernt?

Die Kapitel

Deine erste Homepage
Kapitel 9
Das Aussehen mit CSS gestalten