beispiel2.css

/* Entfernen aller Abstände zwischen den Elementen, die der Browser von sich aus einfügt */
* { margin: 0; padding: 0; }

/* Einheitliche Schriftart einstellen (sans serif), Abstand zwischen Inhalt und Rand des
 * Browserfensters ausschalten */
body { font-family: "Segoe UI", Arial, sans-serif; margin: 0; }

/* Kopfzeile formatieren: dunkelgrauer Hintergrund, weiße Schrift, Abstand der Schrift zum Rand */
#header { background: #333; color: #fff; padding: 20px 100px; }

/* Unterüberschrift formatieren: 12 Punkt Schriftgröße, nicht fett, hellgrau */
h2 { font-size: 12pt; font-weight: normal; color: #bbb; }

/* Hauptinhalt: 10 Pixel Abstand nach oben, 100 Pixel nach links und rechts */
#main { margin: 10px 100px; }

/* Navigationsleite auf die linke Seite, es wird 32 Prozent der Fensterbreite einnehmen */
#navigation { float: left; width: 32%; }

/* Die Inhaltsspalte wird um 33 Prozent der Fensterbreite von links eingerückt,
 * damit Platz für die Navigationsleite ist */
#content { margin-left: 33%; }

/* Die Fußzeile kommt erst nach den beiden Hauptspalten (clear:all), sie hat 10 Pixel Abstand 
 * nach oben und 100 Pixel nach links und rechts, sowie oben einen 1 Pixel dicken Rand in hellgrau */
#footer { clear: both; padding: 10px 100px; border-top: 1px solid #ddd; }

/* Überschriften der 3. Ordnung (hier in der Inhaltsspalte) sind 12 Punkt groß und erhalten eine
 * blaue Unterstreichung */
h3 { font-size: 12pt; border-bottom: 2px solid #369; }

/* Überschriften der 4. Ordnung (hier über dem Menü) sein auch 12 Pt. groß, nicht fett und haben
 * eine graue Unterstreichung */
h4 { font-size: 12pt; font-weight: normal; border-bottom: 2px solid #999; }

/* Das Menü hat keine Bullet Points, die einzelnen Einträge haben 5 Pixel Abstand von einander */
#navigation ul li { list-style-type: none; margin: 5px 0; }

/* Die Menüeinträge haben einen hellgrauen Hintergrund, keine Unterstreichung und einen
 * kleinen inneren Abstand */
#navigation ul li a { display: block; background: #ddd; color: #333; text-decoration: none; padding: 1px 8px; }

/* wenn man die Maus über einen Eintrag bewegt (hover), wird er dunkelblau unterlegt und
 * die Schrift weiß */
#navigation ul li a:hover { background: #385d8a; color: #fff; }