Fontsin CSS:

In our last topic which is “Text in CSS” you have a great control on text like you can change the color of text, you can set alignment of text etc. May be you already know how to make text bold, italic or underline. But with the help of CSS you can resize the font using pixel or percentage.

CSS supports following font properties for HTML elements:

  • Font Color
  • Font Family
  • Font Style
  • Font Size
  • Font Weight
  • Font Variant

Font Color:

Font color is a external part of text. The “color” you use in style that is used to set the color of a text.

Example:

Font Family:

The font family is a set of font-family means there is a combination of some font names. The font family can hold multiple font names in one family. If there are more than one family than it will be separated by commas and it must be written in quotes.

The font family names in CSS are divided into two types:

  • Generic family: This is a group of families with a same look (like serif)
  • Font family: This is a specific single font family (like Arial or sans-serif )

Note:

The serif fonts have small liens at the end of characters whereas sans-serif fonts without any lines.

Example:

Font Style:

The font style property in CSS is mostly used to set the font style italic. But there are three values are supported in CSS:

  • normal : shows the text in normal format
  • italic : shows the text in italic format
  • oblique : as same italic but sometimes not supported

Example:

Font Size:

With the help of CSS font size property you are able to set the size of text. You can manipulate the size of a font in pixels or in percentage or in em or in key terms. This is a good practice to use pixel and percentage format for size of the font.

If you do not define a size for text so that it will take the default size of that HTML element for example a paragraph takes by default 16px or 1em.

Example:

Font Weight:

The font weight property is used to set the thickness of font. The range of weight is from 100(thin) to 900(thick) and you can select the ‘bold’, bolder’ format of weight.

Example:

Font Variant:

The font variant property is allows you to convert the font in all small caps means the all small letters also come in capital letters.

Example:

 

Leave a Reply

Your email address will not be published. Required fields are marked *