CSS Font Properties with HTML

August 26, 2015
Font Size
In CSS, Font size is given using property "Font-size". We can give value of Font-size using 4 different units.
  • Pixels (px)
  • Em(em)
  • Points (pt)
  • percentage (%)
Others units are pc (picas), cm (centimetres), mm (millimetres) and in (inches).
For a p tag,
16px= 1em=100%=12pt

HTML Code-

<p style="font-size:16px"> Font size 16px </p>

<p style="font-size:1em"> Font size 1em </p>

<p style="font-size:12pt"> Font size 12pt </p>

<p style="font-size:100%"> Font size 100% </p>

Output-
Font size 16px
Font size 1em
Font size 12pt
Font size 100%

Font Weight
In CSS, Font weight is used to create a text Bold. Various value of font-weight are
  • Bold
  • Bolder
  • Normal
  • Value between 100-900
Basiclly we use only Bold and Normal as other browsers does'nt make any difference between and understand bold and normal.

HTML Code-

<p style="font-weight:bold"> Font weight bold </p>

<p style="font-weight:bolder"> Font weight bolder  </p>

<p style="font-weight:normal"> Font weight normal </p>

<p style="font-weight:100"> Font weight 100 </p>

<p style="font-weight:500"> Font weight 500 </p>

<p style="font-weight:900"> Font weight 900 </p>

 Output-
Font weight bold
Font weight bolder
Font weight normal
Font weight 100
Font weight 500
Font weight 900

Font Style
In CSS, Font style is used to create a text italic. Various value of font-style are
  • Italic
  • Normal
HTML Code-

<p style="font-style:normal"> Font style normal </p>

<p style="font-style:italic"> Font style italic </p>

Output-
Font style normal
Font style italic

Font Family
In CSS, Font family specify the font we are using. It can be
  • Arial
  • helvetica
  • Times new roman
  • Georgia
  • Serif
We can also write two different font together. This tell the browser that if one font is unavailable, use another one.

HTML Code-

<p style="font-family:arial"> Font family Arial  </p>

<p style="font-family:helvetica"> Font family Helvetica  </p>

<p style="font-family:"times new roman""> Font family Roman </p>

<p style="font-family:georgia"> Font family Georgia </p>

<p style="font-family:arial, helvetica "> Font family Arial and helvetica </p>

Output-
Font family Arial
Font family Helvetica
Font family Roman
Font family Georgia
Font family Arial and helvetica

, ,
By:
Ashwani
Ashwani

This is a short biography of the post author. Maecenas nec odio et ante tincidunt tempus donec vitae sapien ut libero venenatis faucibus nullam quis ante maecenas nec odio et ante tincidunt tempus donec.

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)