Workshops zu CSSScalable Vector GraphicsBilderwandWeb ServicesWeblog

Überschriften mit CSS

Viele benutzen immer noch für die Gestaltung der oberen 30% ihrer Homepage eine Grafik oder einen Frame (mit Grafiken). Das ist schön, aber in manchen Fällen garnicht nötig. Mit CSS kann man auch interessante Überschriften gestalten und es hat den Vorteil, dass die Ladezeiten extrem klein werden. Ich werde das mal an einem Beispiel demonstrieren. Angenommen oben soll "Willkommen" stehen. Ich binde das in ein ganz normales HTML Tag ein (ins p, oder body oder div oder egal) und definiere das dann im Head der Datei.

<style type="text/css">
<!--
hier stehen die unten folgenden Angaben
-->
</style>

Alternativ ist es natürlich möglich, das ganze in ein externes Stylesheet auszulagern und mit <link rel="stylesheet" href="header.css" type="text/css"> in den Head der Datei einzubinden.

Die Schrift soll kursiv werden:
{font-style:italic;}
und fett:
{font-weight:bold;}
und ziemlich groß:
{font-size:60px;}
Angaben kann man mit px,pt,cm,mm,in und % machen
 

Beispiel hierfür: Beispiel 1

Jetzt kommt noch ein bestimmter Font dazu. Man kann mehrere Schriften definieren, die dann vom Browser in der angegebenen Reihenfolge abgearbeitet werden.

Schriftarten:
{font-family:"Comic Sans MS",Comic,fantasy;}
die Buchstaben sollen einen größeren Abstand voneinander bekommen:
{letter-spacing:10px;}
den Hintergrund färben wir gelb ein:
{background:yellow;}
die Schriftfarbe soll blau werden:
{color:blue;}
der Text soll in der Mitte stehen:
{text-align:center;}

Bis jetzt sieht es so aus: Beispiel 2

Gut sieht es aus, wenn die Hintergrundfarbe schmaler als die Schrift ist (Textboxen hat ja jeder):
{line-height:40%;}
Ein Rand käme auch noch gut, aber nicht irgendeiner, 3D sollte es schon sein:
{border-style:groove;}
den Rand kann man noch einfärben, blau zum Beispiel:
{border-color:blue;}
und ein bisschen breiter kann er auch sein:
{border-width:3px;}

So es geht noch mehr, aber es reicht. Beispiel 3

Alle modernen Browser zeigen das richtig an.