CSS / Schriftfarbe und Schriftart mit CSS erstellen

von: Werner Zenk

Der HTML-Tag <font> gilt inzwischen als veraltet. Mit CSS gibt es eine bessere Alternative.

• Schriftfarbe

Schriftfarbe mit HTML:

<font color="red"> Rot </font>

<font color="#FF0000"> Rot </font>

Schriftfarbe mit CSS:

<span style="color: red"> Rot </span>

<span style="color: #FF0000"> Rot </span>

<span style="color: rgb(255,0,0)"> Rot </span>

Siehe auch

Farbnamen, Dezimal, Hexadezimal (mit Farbbeispielen)

• Schriftgröße

Schriftgröße mit HTML:

<font size="4"> Text </font>

Schriftgröße mit CSS:

<span style="font-size: 12pt"> Text </span>
<span style="font-size: 12px"> Text </span>

Mit HTML können Sie die Schriftgröße nur in Punkt angeben,
mit CSS haben Sie wesentlich mehr Möglichkeiten die Schriftgröße nach Ihren wünschen anzupassen:

<span style="font-size: 12pt"> Text </span> // Punkt
<span style="font-size: 12px"> Text </span> // Pixel
<span style="font-size: 12cm"> Text </span> // Zentimeter
<span style="font-size: 12mm"> Text </span> // Millimeter
<span style="font-size: 12%"> Text </span> // Prozent

Siehe auch

Masseinheiten für CSS

• Schriftart

Schriftart mit HTML:

<font face="Verdana"> Text </font>

Schriftart mit CSS:

<span style="font-family: Verdana"> Text </span>

Siehe auch

Die optimale Schriftart

Ein Beispiel mit mehreren Angaben bei HTML:

<font color="FF0000" size="4" face="Verdana"> Text </font>

Ein Beispiel mit mehreren Angaben bei CSS:

<span  style="color:#FF0000; font-size:12px; font- family:Verdana"> Text </span>

Viele weitere Beispiele finden Sie unter

Textgestaltung mit CSS

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:

Bildergröße über "em" automatisch an der Textgröße anpassen

Mit Farbe Unterstreichen

Übergangsfilter

Tabellenzeilen einfärben - Jede zweite Zeile in einer Tabelle bekommt eine andere Hintergrundfarbe.

CSS Hyperlink #20

CSS Hyperlink #13

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

Verlinkte Grafik mit Hover-Effekt

CSS Hyperlink #1

Zeilenumbruch im Linktext verhindern - So vermeiden Sie das ein (langer) Linktext durch einen Zeilenumbruch geteilt wird. …mehr