Zum Inhalt springen

CSS-Einführung: Einfache Beispielseite

  • Fabian Ziegler 
  • Zuletzt aktualisiert am
  • Lesezeit ca. 4 min.

In diesem Artikel zeige ich euch anhand einer einfachen Seite bestehend aus Kopf, Navigation und Content, wie man mit Hilfe von CSS aus langweiligem HTML ansprechende Seiten zaubern kann.

Zuerst werden Wir – so wie es sich gehört – ein schönes valides Grundgerüst aus HTML bauen. In diesem Teil sollte kein Augenmerk auf spätere Darstellung genommen werden, jedoch werde ich trotzdem einmal aus designtechnischen Gründen zusätzliches Mark-Up einbauen.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ein ansprechendes Seitenlayout mit CSS</title>

        <link type="text/css" rel="stylesheet" media="screen" href="design.css" />
    </head>
    <body>
        <h1 id="title">ansprechendes Seitenlayout mit CSS</h1>
        <div id="border"></div>
        <ul id="navi">
            <li class="active"><a href="index.html" title="Home">Home</a></li>
            <li><a href="#" title="Über Mich">Über Mich</a></li>
            <li><a href="#" title="Impressum">Impressum</a></li>
        </ul>
        <div id="content">
            <h2>Home</h2>
            <p>Hallo, sie befinden sich hier auf der Startseite einer ansprechenden Seite mit CSS Layout.</p>
            <p>Schick, oder?!</p>
        </div>
    </body>
</html>

Zuerst binden wir eine Datei namens design.css ein, in der sich unsere CSS Anweisungen befinden. Sie macht aus unserem langweiligen HTML Grundgerüst ein ansprechendes Seitenlayout.

Das Mark-Up der Seite ist in vier Bereich aufgeteilt:

  1. Der erste Bereich ist der Header Bereich, der mit einem h1 ausgezeichnet ist; und manche werden überrascht sein, wie viel man aus so einem Tag mittels CSS rausholen kann.
  2. Der zweite Bereich, der Container mittels div, ist der Mark-Up Teil, der nur wegen der Optik eingefügt wurde. In ihm werden wir dem Header einen schönen Schlagschatten verpassen.
  3. Bereich drei ist die Navigation. Da eine Navigation genau betrachtet eine Linkliste ist, habe ich sie auch als solche im HTML Mark-Up ausgezeichnet.
  4. Und zum Schluss der Content Bereich. Wie in jedem guten CSS basierten Layout kommt hier das gute alte div zum Einsatz, dass den Inhalt bestehend aus Überschrift, Texten (, …) bündelt.

CSS

Das CSS werde ich auch direkt im Code mittels CSS Kommentaren (/* ... */) erläutern.

/*
    Zuerst setzten wir die Eigenschaften für margin, padding und border zurück, 
    sodass Browserabweichungen ausgeglichen werden können.
*/
* {
    margin: 0px;
    padding: 0px;
    border: none;
}

/*
    Für den kompletten HTML Bereich setzen wir die Standard Schrift und verpassen
    der Seite noch eine Hintergrundfarbe.
*/
html {
    background-color: #fff; /* im Internet Explorer ist manchmal die Standard Hintergrundfarbe nicht weiß, deshalb setzen wir es manuell */
    color: #111; /* auch hier eine Farbe ähnelnd zu schwarz, aber nicht so grell */
    font-family: Verdana, Helvetica, Arial, sans-serif;
}

/*
    Nun kommt der Header: Wir werden ihm ein schönes Hintergrundbild verpassen.
    Damit dieses auch komplett angezeigt wird, setzte ich als Höhe die Höhe des Bildes.
    Danach platziere ich den Text nach rechts oben in die Ecke und setze eine Schriftfarbe.
*/
#title {
    /* 
        Als Hintergrundbild setzte ich header.jpg.
        Da dieses aber nicht breit genug ist, setzte ich zusätzlich
        als Hintergrundfarbe den Blauton, den der Hintergrund im Bild hat.
        Da dessen HEX-Code sehr komplex ist, nutze ich die RGB Angabe von CSS
    */
    background: rgb(115,183,254) url(header.jpg) no-repeat top left;
    height: 170px; /* 170px + 10px (padding) gibt die 180px des Bildes */
    text-align: right;
    padding: 10px 15px 0px 0px;
    font-weight: normal;
}

/*
    Nun kommt der Schlagschatten.
    Dieser besteht einfach aus einer Höhe und einem Hintergrund.
*/
#border {
    background: url(schatten.png) repeat-x top left;
    height: 12px; 
}

/*
    Zuerst bekommt die Navi ihren richtigen Abstand zu den anderen Elementen.
*/
#navi {
    margin: 1em 1.3em;
}

/*
    Und nun bekommen auch noch die Listenpunkte ihr styling.
    Mit 'display' werden sie horizontal angeordnet und ihre Listenpunkte werden entfernt.
*/
#navi li {
    display: inline;
    list-style-type: none;
    padding: 0px 1em 0px 0px;
}

/*
    Da die Listenpunkte Links enthalten, werden die nichtmal extra formatiert.
*/
#navi a, #navi a:active, #navi a:visited, #navi a:hover {   
    /* zwar aus Usability nicht korrekt, aber in der Navigation vertretbar */
     text-decoration: none; 
}

/*
    Und zu guter letzt noch der Content. 
    Am Container selbst wird nicht viel getan, aber die einzelnen Elemente darin müssen
    wieder ihren 'margin' bekommen, den wir am Anfang zurück gesetzt haben.
*/
#content {
    margin: 0px 1.3em;
}

#content h2, #content p {
    margin: 1em 0px;
}

/*
    damit das ganze noch ein bisschen bunter wird, bekommt die Überschrift die selbe Farbe,
    wie der Hintergrund des Headers.
*/
#content h2 {
    color: rgb(115,183,254);
}
Fabian Ziegler
Letzte Artikel von Fabian Ziegler (Alle anzeigen)

Weitere Beiträge: