CSS Font

CSS Tutorial  >  Font

Common ways of manipulating font properties in CSS include the following:

  • font-family
  • font-size
  • font-weight
  • font-style
  • font-variant

    Each is described in detail below:


    The font-family property specifies the type of the font.

    CSS DeclarationOutput

    p {font-family: verdana;}

    Font Family Verdana.

    p {font-family: arial;}

    Font Family Arial.

    p {font-family: impact;}

    Font Family Impact.


    The font-size property specifies the size of the font. The size can be numerical (length or percentage), or in text (possible values are "xx-large", "x-large", "large", "medium", "small", "x-small", and "xx-small").

    CSS DeclarationOutput

    p {font-size:9px;}

    Font Size 9px.

    p {font-size:150%;}

    Font Size 150%.

    p {font-size:0.8cm;}

    Font Size 0.8cm.

    p {font-size:small;}

    Font Size small.

    p {font-size:large;}

    Font Size large.


    The font-weight property specifies the thickness of the font. Font weight can go from 100 to 900, with 900 being the thickest. One can also specify "bold", "bolder", or "normal".

    Examples below:

    CSS DeclarationOutput

    p {font-weight: 100;}

    This is font weight 100.

    p {font-weight: 900;}

    This is font weight 900.

    p {font-weight: bold;}

    This is bold font weight.


    The font-style property specifies whether the font is italic or oblique.

    CSS DeclarationOutput

    p {font-style: italic;}

    This is font style italics.


    The font-variant property specifies whether the font will be displayed in small caps. Small caps mean that all letters will be displayed in the capital case, but the font size is smaller than usual. The possible values are 'small-caps' and 'normal'. Let's look at the example below.

    With the following CSS,

    span {

    the HTML code below,

    <span>initial in small caps</span> AND LATER IN LARGE CAPS.


    initial in small caps AND LATER IN LARGE CAPS.

    Next: CSS For Link

    Copyright © 2022   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact