Html Font Style Tutorial CSS Style

The font property sets the style of the font displayed on a web page html.
Font style sets the font family, font weight, font size. The following font style examples shows how to set the font style with css.

• font family
• font color
• font style
• font weight
• font variant
• All in one

CSS Code font family

.fontarial {font-family:Arial;}
.fontverdana {font-family:Verdana;}
.fonttimes {font-family:"Times New Roman";}
.fontserif {font-family:sans-serif;}

HTML Code font family

<span class="fontarial">Font family arial</span><br />
<span class="fontverdana">Font family verdana</span><br />
<span class="fonttimes">Font family Times New Roman</span><br />
<span class="fontserif">Font family sans-serif</span><br />

HTML Output

---

CSS Code font color

.fontcolorblue {color:Blue;}
.fontcolorred {color:Red;}
.fontcolorgreen {color:Green;}

HTML Code font color

<span class="fontcolorblue">Font color blue</span><br />
<span class="fontcolorred">Font color red</span><br />
<span class="fontcolorgreen">Font color green</span><br />

HTML Output

---

CSS Code font style

.fontstyleitalic {font-style:italic;}
.fontstyleoblique {font-style:oblique;}

HTML Code font style

<span class="fontstyleitalic">Font style italic</span><br />
<span class="fontstyleoblique">Font style oblique</span><br />

HTML Output

---

CSS Code font weight

.fontweightlighter {font-weight:lighter;}
.fontweightnormal {font-weight:normal;}
.fontweightbold {font-weight:bold;}
.fontweightbolder {font-weight:bolder;}

HTML Code font weight

<span class="fontweightlighter">font weight lighter</span><br />
<span class="fontweightnormal">font weight normal</span><br />
<span class="fontweightbold">font weight bold</span><br />
<span class="fontweightbolder">font weight bolder</span><br />

HTML Output

---

CSS Code font variant

.fontvariant {font-variant:normal;}
.fontvariantcaps {font-variant:small-caps;}

HTML Code font variant

<span class="fontvariant">font variant normal</span><br />
<span class="fontvariantcaps">font variant caps</span><br />

HTML Output

---

CSS Code font style all in one

.fontall1 {font: normal 12px arial;}
.fontall2 {font: 12pt/14pt verdana;}
.fontall3 {font: bold italic 14px "Times New Roman";}

HTML Code font style all in one

<span class="fontall1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span><br />
<span class="fontall2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span><br />
<span class="fontall3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span><br />

HTML Output

---

© 2008 htmlcss.org | Valid XHTML | CSS