6.2.5 CSS-Formate auf HTML-Elemente anwenden

In einem Stylesheet können wir mit Hilfe von Element-Selektoren z. B. Absatztypen, Tabellen oder Texte formatieren. Verwenden wir die formatierten HTML-Elemente innerhalb des HTML-Dokumentes, werden alle definierten Formate angewendet.

Beispiel: Sourcecode des Stylesheets style.css

body {
    background-color: #dafde2;
    margin-left: 200px;
}
h1 {
    font-style: italic;
    color: blue;
    border-bottom: 2px solid #000000;
}
li {
    font-family: Helvetica, sans-serif;
    font-size: 120%;
    color: #885ac7;
}
p {
    font-weight: bold;
    background-color: #c0c0c0;
}

Sourcecode des HTML-Dokuments

<!doctype html>                                               
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Element-Selektoren</title>
  <link rel="stylesheet" type="text/css" href="css_bsp_formateaufelemente.css" />
</head>
<body>
  <h1>Eine blaue h1-Überschrift</h1>
  <ul>
      <li>Ein Listenpunkt</li>
      <li>Noch ein Listenpunkt</li>
  </ul>
  <p>Darunter ein normaler Textabsatz in fetter Schrift auf einem grauen Hintergrund.</p>
</body>
</html>

So sieht es im Browser aus


Ein zentrales Format für alle HTML-Elemente des gleichen Typs wird mit einem Selektor definiert, der den Namen des HTML-Elementtyps trägt. Das obige Beispiel zeigt die Selektoren:

  • body (gesamtes Dokument, auch Hintergrund)

  • h1 (Überschrift 1. Ordnung)

  • li (Listenpunkt)

  • p (Textabsatz), die auf diese Weise formatiert werden

Das Ergebnis

  • Das body-Element bekommt so z. B. eine hellgrüne Hintergrundfarbe und einen linken Randabstand von 200 Pixeln.

  • Das h1-Element wird unter anderem kursiv geschrieben und der Textabsatz hat nun einen grauen Hintergrund. Zusätzlich haben diese Elemente noch weitere Formate bekommen, diese zu erklären würde allerdings den späteren Lektionen vorgreifen.

Auf diese Art und Weise können Sie alle HTML-Elemente, welche Sie nutzen, mit Eigenschaften versehen. Welche Eigenschaften sie genau auf welche Elemente anwenden können, erfahren Sie in den weiteren Kapiteln.

Der Selektor *

Ein Format für wirklich alle HTML-Elemente wird mit dem Selektor * erzeugt. Jedes Element nimmt sich alle Eigenschaften und Werte raus, die es verwenden kann.

Beispiel für den *-Selektor

Beispiel für den *-Selektor - alles 10pt und in rot

Hinweis: Obwohl der *-Selektor praktisch ist, sollte er sparsam eingesetzt werden. Insbesondere in großen Dokumenten oder komplexen Projekten kann er die Performance beeinträchtigen.