Chapter 13 - What are Font Properties in CSS?

           , , ,      No comments   
CSS font properties plays a vital role in formatting the text of your webpage. It defines the font family, boldness, size, and the style of a text you are applying on.

There are 6 main properties of the font style:-

  1. Font

    • Sets all the font properties in one declaration 

  2. Font-Family

    • Specifies the font family for text

  3. Font-Size

    • Specifies the font size of text

  4. Font-Style

    • Specifies the font style for text

  5. Font-Weight

    • Specifies the weight of a font 

  6. Font-Variant

    • Specifies whether or not a text should be displayed in a small-caps font 

Font

Now lets begin with the first property of font. It is itself font. You can set the font property as the style, weight, variant, size, line height and font with the following syntax:-

Example for Font Property:-

 /* Syntax of Font Property in CSS*/

 font:italic bold normal small/2.4em Verdana;
  

The above css code would set the text of an element to an italic style with a bold weight and a normal variant also with a relative size and with the line height of 2.4em and the font to Verdana typeface.

Font Family

To set a desired font family style, use the following property of font:-

Example for Font Family Property:-

 /*Syntax of Font Family Property in CSS*/

 font-family:Verdana,Arial;
  

Font Size

If you want to change the default font size then you can use the font size property to set font size.

It has 11 values to apply for setting up the font size:-
  1. xx-large
  2. x-large
  3. larger
  4. large
  5. medium
  6. small
  7. smaller
  8. x-small
  9. xx-small
  10. pixel
  11. percent

Example for Font Size Property:-

 /*Syntax of Font Size Property in CSS*/

 font-Size:value;
  

Font Style

You can set text style with the font style wherever required. this property has 3 values:-
  1. Normal
  2. Italic
  3. Oblique

Example for Font Style Property:-

 /*Syntax of Font Style Property in CSS*/

 font-style:value;
  

NOTE:- To use these properties and relevant values of Font, read posts on each topic in the next section of this blog.

0 comments:

Post a Comment