WMP Webstandards

Headline Management

zurück zur Übersicht

Nach oben

Wozu?

Heutzutage möchte keiner mehr Überschriften die von <h1> bis <h6> gehen, dick und groß sind. Man möchte viel lieber schön gestylte Überschriften haben in anderen Farben und Formen. Man sollte allerdings dabei bleiben, dass <h1> die größte Überschrift ist und <h6> die kleinste.

Nach oben

Wie style ich eine Überschrift

Im Grunde ist das ganz einfach! Man brauch nicht extra Klassen definieren bzw. IDs. Ein kleines Beispiel für eine <h3> Überschrift:

h3 {
  color   #000; /* Schwarz */
  font-style   italic /* Kursiv */
  font-size   16px;
  border-bottom 1px dashed #c0c0c0;
}
Nach oben

Erklärung

Viel zu erklären gibt es ja nicht. Die Schriftgröße habe ich auf 16 Pixel definiert damit das ganze keine zu große ausmaßen annimmt. Außerdem für den ganzen <h3>-Tag einen Rand (unten) gestrichelt mit der Farbe grau.

Nach oben

Sonstiges

<h1> sollte man nur einmal benutzen und vorallem für den Header. Ein Beispiel wäre dies hier: CSS Contest. Natürlich kann jede Überschrift gleich stylen, allderdings sollte man, wie vorhin schon gesagt, die Schriftgrößen beibehalten. <h6> sollte nicht die größte Überschrift sein obwohl sie in der Überschriftenliste als letztes steht. Man kann natürlich Überschriften stylen wie man will, solange sie leserlich bleiben.

Nach oben

Demo

Hier noch die Demo für euch.

Kommentare







Von curi. Letzte Änderung am 17.04.2007