Zum Inhalt

Ersten Buchstaben im Text groß schreiben

Bei einem aktuellen Projekt möchte ich den ersten Buchstaben im Text wesentlich größer haben, als den Rest. Man sieht solch ein Design in Büchern sehr oft.

Das geht alles ziemlich einfach, kopiert lediglich diesen Code in eure Custom.CSS:

p:first-child:first-letter {
font-family:> Georgia;
float: left;
font-size: 71px;
line-height: 5rem;
padding-top: 16px;
padding-right: 17px;
font-weight: 700;
color: #333;
}

Nun gab es aber das Problem, dass jeder Absatz im extra <p>-Tag mit solch einem Buchstaben anfängt. Das kann man aber einfach umgehen, indem man nur den ersten Absatz ansteuert.

HTML:

<p class="first"></p>

CSS:

p.first:first-child:first-letter {
font-family:Georgia;
float: left;
font-size: 71px;
line-height: 5rem;
padding-top: 16px;
padding-right: 17px;
font-weight: 700;
color: #333;
}

So schaut das ganze dann aus:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Veröffentlicht inCSS

Schreibe den ersten Kommentar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

elf + fünfzehn =