Kapitel 5: Übersicht behalten mit globalen CSS Einstellungen

Zentral definierte Formate

Um das HTML-Dokument übersichtlicher zu gestalten und das Ändern des Aussehens zu vereinfachen kann man Elemente global verändern.

Dazu gibt es einen neues HTML-Element namens style:

  <style>
    body {
        color: #222222;
        font-family: Verdana;
    }
    h1 {
        background-color:green;
        color:white;
        padding: 7px;
        border-radius:3px;
        font-size:20px;
        text-align: center;
    }
    h2 {
        background-color:lightgreen;
        padding: 7px;
        border-radius:3px;
        font-size:16px;
        text-align: center;
    }
  </style>

Mit den hier verwendeten Einstellungen verändert man alle Elemente des angesprochenen Typs. In diesem Beispiel wird die Schriftart und -farbe für die ganze Seite geändert (body) und die Überschriften ein wenig "aufgehübscht" (h1 und h2).

CSS-Klassen

Um hier genauere Abstufungen machen zu können, kann man sogenannte CSS-Klassen definieren. Dies ist zum Beispiel praktisch bei wiederkehrenden Arten von Meldungen:

Dies ist eine Fehlermeldung!

Dies auch!

Man muss hier beachten, das in der Style-Definition .error ein Punkt vorne steht und im Element im class-Attribut nicht: class="error"!

Noch zentraler

Den <style>-Tag packt man üblicherweise in den <head>-Bereich.

Eine Alternative dazu ist es die CSS-Definitionen in eine andere Datei zu schreiben. Dazu geht man wie folgt vor:

Jetzt hat man zwei getrennte Dateien, wobei eine nur für den Aufbau und die andere nur für das Aussehen zuständig ist. Je Umfangreicher die Webseite ist, desto mehr Vorteil zieht man daraus. Zum Beispiel kann das Stylesheet (so heißt die css-Datei) auf jeder html-Seite eingebunden werden und man kann zentral das Aussehen aller Überschriften auf allen Seiten ändern.


StartseiteImpressum