CSS / Große Buchstaben mit CSS

von: Werner Zenk

Mit CSS sind große Buchstaben kein Problem.
Einfach mit <span style="font-size: 40px;">A</span> erstellen.
A

In Büchern stehen solche großen Buchstaben oft an erster Stelle.
Damit der Leser weiß hier beginnt die Geschichte.

Einige Beispiele:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...

Formatiert wird dieser große Buchstabe mit:

<style type="text/css">
 .gross:first-letter {
  float: left;
  color: #914848;
  font-size: 55px;
  font-family: Times New Roman;
} 
</style>

<p class=gross>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>

Viele Variationen sind dabei möglich,verändern der Schriftart, der Hintergrundfarbe oder der Schriftgröße.

<style type="text/css">
 .gross5:first-letter {
float: left;
color: #0000a0;
font-size: 55px;
border: solid 1px #c4c4ff;
padding: 5px;
} 
</style>

<p class=gross5>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>

<style type="text/css">
 .gross:first-letter {
float: left;
color: #ffd700;
font-size: 65px;
font-family: Arial;
margin: 5px;
background-image: url(bild.gif);
padding: 3px;
} 
</style>

<p class=gross>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>

Das könnte Sie interessieren:

Dateibrowser - Ein einfacher Dateibrowser, ideal um PHP-Scripte auf einem lokalen Webserver zu testen, die PHP-Scripte müssen dann nicht mehr über die Adresszeile des Browsers aufgerufen werden.

Bildformate Ladezeiten

ABC-Smiley Generator - Erstellen Sie lustige Text-Smileys für Ihre Homepage. Eingabe zum Beispiel einer Email, Telefonnummer, Webadresse oder ICQ etc.

Farbverlauf Generator (HTML) - (HTML) Erstellt einen Farbverlauf mit Hilfe einer Tabelle.

Linie Generator - Der Linie Generator erzeugt Webseiten-Teiler von jeder Länge, Breite und Farbe — alles ohne schreiben zu müssen! …mehr