Zum Inhalt springen

CSS-Einführung: Einfache Beispielseite

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  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);
}

Abonniere das kostenlose KI-Update

Bleib auf dem Laufenden in Sachen Künstliche Intelligenz!

Melde Dich jetzt mit Deiner E-Mail-Adresse an und ich versorge Dich kostenlos mit News-Updates, Tools, Tipps und Empfehlungen aus den Bereichen Künstliche Intelligenz für dein Online Business, WordPress, SEO, Online-Marketing und vieles mehr.

Keine Sorge, ich mag Spam genauso wenig wie Du und gebe Deine Daten niemals weiter! Du bekommst höchstens einmal pro Woche eine E-Mail von mir. Versprochen.

Kai Spriestersbach

Kai Spriestersbach

Kai Spriestersbach ist erfolgreicher Unternehmer und digitaler Stratege mit einem Master-Abschluss in Web Science. Er ist Inhaber von AFAIK und verfügt über mehr als 20 Jahre Erfahrung im Aufbau und der Optimierung von webbasierten Geschäftsmodellen. Als einer der erfahrensten Search Marketing Experten im deutschsprachigen Raum hat er mehr als 25 Vorträge auf SEO- und Online-Marketing-Konferenzen in Deutschland und Österreich gehalten. In den letzten Jahren hat er sich intensiv mit Large Language Models beschäftigt und sich als Experte für die Textgenerierung mit Hilfe künstlicher Intelligenz etabliert. Seine Karriere begann er mit einer Ausbildung zum Mediengestalter (IHK), bevor er den Bachelor of Science (B.Sc) in E-Commerce absolvierte. Anschließend erwarb er den Master of Science (M.Sc) in Web Science und forschte an der RPTU im Bereich angewandter generativer KI.

×