CSS Font

tutorial and example
tutorial and example

CSS Font provide to manage the look of texts by using CSS font properties. In CSS font you can change the font properties like text size, color, style etc.

You can resize your font properties by using percentage.

There are various font attributes that are given below in the table.

Font Properties Descriptions
CSS Font color It is used to change the color of text.
CSS Font family It is used to set the font family.
CSS Font size It is used to increase and decrease the size of font.
CSS Font style It is used to change the font style like bold, italic etc.
CSS Font variant It is used to creates a small-caps effect.
CSS Font weight It is used to increase and decrease the boldness and lightness of font.

CSS Font Color

CSS font color is used to implement the color of text. It is the important attribute of CSS.

There are given three formats to define color.

  • By a color name
  • By hexadecimal value
  • By RGB

Let us see an example of CSS font color:

Try Now

CSS Font Family

The CSS font family is used to set the font family properties. It can be divided in two type:

  1. Generic family: It is group of font family. Like Serif, Sans-serif, and Monospace.
  2. Font family: It specifies the font family. Like New Times Roman, Arial, etc.

NOTE: If font family name is more than one word then it must be in quotation marks. Like: “Times New Roman”

Let us see an example of CSS font family:

CSS Font Size

The CSS font size is used to increase and decrease the font size properties.

It is important to manage the text size in web design.

You should always <h1>-<h6> for headline and <p> for paragraph.

The font size value can be an absolute pr relative size.

Let us see an example of CSS font size:

CSS Font Style

CSS font style property is used to display the font style like italic, oblique etc.

Let us see an example of CSS font style:

CSS Font Variant

CSS font variant property is used to set the variant of an element. It may be normal and small-caps.

Let us see an example of CSS font variant:

CSS Font Weight

CSS font weight property is used define the weight of the font. Font weight may be normal, bold, lighter etc. or number (100 up to 900).

Let us see an example of CSS font weight:

Try Now