CSS-Stile hinzufügen

Ein kurzer Überblick der Css-Stile

Dieses Beispiel zeigt nur eine Möglichkeit im Umgang mit Css-Stile. Unser Ziel ist es, den Html-Code auf seine  Funktionalität prüfen zu können. Die unspektakuläre Gestaltung soll eine Übersicht erleichtern. Die Anleitung beschränkt sich auf die wesentlichen Css-Angaben.

Das fertige Beispiel: layout1.html - layout1.css

Alle (* selektiert alle Elemente) Aussen- und Innenabstände zurücksetzen. Diese Strategie kann für alle Browser klare Verhältnisse schaffen, alle gewollten Abstände (margin uns padding) müssen so selber definiert werden.

* {
    margin:0;
    padding:0;
}

Der Container bekommt eine maximale Breite, kann also bei schamlerem Browserfenster verkleinert werden. Die Aussenabstände (margin:auto;) setzen ihn immer in die Mitte des Browserfensters.

.container {
    max-width:600px;
    margin:0 auto;
    background-color: aliceblue;
}

Die Breite vom header-Element passt sich mit 100% immer dem Elternelement, dem Container an.

header {
    width:100%;
    height:100px;
    border-bottom:1px solid black;
}

Die Top-Navigation laüft horizontal (float:left;), die drei Listenelemente besitzen jeweils 33% Breite, das verlinkte a-Element wird mit (text-align: center;) eingemittet. Listenpunkte (list-style-type: none;) und Unterstreichung (list-style-type: none;) werden entfernt. Beim Darüberfahren (nav.top li a:hover) wird die Farbe gewechselt.

nav.top {
    margin: 8px 0;
}
nav.top li {
    float:left;
    width:33%;
    list-style-type: none;
}
nav.top li a {
    display:block;
    text-align: center;
    color:#cc0000;
    text-decoration:none;
    font-size: 24px;
}
nav.top li a:hover {
    color:#ff5b5b;
}

Die Seiten-Navigation und der Inhalt werden mit (float:left;) und der jeweiligen Breitenangabe (width:30%; und width:70%;) nebeneinander dargestellt. Dazu muss die Angabe in Prozent erfolgen und zusammen 100% Gesamtbreite ergeben.

/* Seiten-Navigation */
nav.sidebar {
    width:30%;
    float:left;
}

/* Inhalte */
article.content {
    width:70%;
    float:left;
}

Die SideBar-Navigation ist gleich formatiert wie die Top-Navigation, mit Ausnahme des float-Befehls zur horizontalen Darstellung.

/* Seiten-Navigation */
nav.sidebar {
    width:30%;
    float:left;
}
nav.sidebar li {
    list-style-type: none;
}
nav.sidebar a {
    display:block;
    font-size: 20px;
    text-decoration:none;
    padding:12px;
    color:#cc0000;
}
nav.sidebar li a:hover {
    color:#ff5b5b;
}

Das footer-Element löst den float-Befehl auf (clear:both;), die beiden Absätze im Footer werden ihren Klassenbezeichnungen entsprechend nach Links (float:left;) und Rechts (float:right;) gesetzt.

/* Footer */
footer {
    width:100%;
    height:60px;
    clear:both;
    border-top:1px solid black;
}
footer p.footerleft {
    float:left;
    padding:12px;
    font-size: 12px;
}
footer p.footerright {
    float:right;
    padding:12px;
    font-size: 12px;
}

Die externe Css-Datei verlinken

Vorbereitung

1. Erstelle in Brackets eine neue Datei im gleichen Ordner. Speichere sie als layout1.css

2. Öffne die beigelegte Css-Datei: layout1.css , kopiere den Code und füge ihn in deine Datei ein.

3. Verlinke deine Html-Datei mit der Css-Datei

<link rel="stylesheet" href="layout1.css">

4. Speichere beide Dateien und teste das Ergebniss im Browser.

Weiter mit einer Übung, um ein weiteres Layout mit Emmet zu erstellen