Hallo~

In diesem Tutorial zeige ich euch wie man Überschriften verschönert :D

Überschrift mit einem Border an der Seite
a)
Einfache Überschrift:

Überschrift

Code:

<h1>Überschrift</h1>

Was wir haben wollen:

Überschrift

Wie kann man den Border an der Seite erstellen?
Ganz einfach; in die "" von style muss folgendes: border-left: *größe in pixeln* solid *hexfarbe*;

b)
Einfache Überschrift:

Überschrift

Code:

<h1>Überschrift</h1>

Was wir haben wollen:

Überschrift

Wie mache ich die Ecken rund?
Auch einfach; mit border-radius. Darin kannst du eine Menge in Pixeln, cm, etc. angeben, dies bewirkt das die Border an der Seite abgerundet werden :)

Den ersten Buchstaben in einer anderen Schriftfarbe/Schriftart anzeigen lassen
Dieses mal arbeiten wir mit

Code:

<style type="text/css">

Code:

<style type="text/css">
.ü1:first-letter {
color: #57a15b;
}
</style>
<h1 style="border-bottom: 0;" class="ü1">Überschrift</h1>

*probiert es aus, hier klappt dies nicht!*

Überschriften Hintergründe geben

Wie fügt man den h1 einen Hintergrund zu?
Mit "background". Dahinter gibt man dann url("*die url zum Bild*") oder die Farbe ein.

Überschrift

Bild Quelle

Ich hoffe ich hab etwas geholfen :D
Und, ihr könnt alle kombinieren! Viel Spaß :3

LG