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>

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!

Das könnte Sie interessieren:

CSS Hyperlink #7

Element genau in der Mitte des Browserfensters zentrieren - Manchmal steht man vor der Aufgabe ein Bild genau in der Mitte zu zentrieren. Egal wie groß das Browserfenster auch ist, das Bild soll horizontal wie vertikal zentriert sein.

Mehrfarbige Linien

Hover.- MouseOver-Technik - Drei verschiedene Button-Techniken, zum Beispiel für Menüs.

CSS Hyperlink #42

Bilder in CSS einbinden

CSS Hyperlink #33

Bilder übereinander legen (stapeln) - Mit CSS (z-index) können Sie Objekte (Bilder, Text, Container, ...) übereinander legen (stapeln).

CSS Befehle: Rahmen

Symbolische Links

Button mit Hintergrundbild

Große Buchstaben mit CSS …mehr