CSS Font Styling

fontCSS Font setting or styling is an essential part & parcel in wed designing.A lot of changes are done in web text or content by css fonts setting.

For Example: with the help of css fonts setting we can change font size,font style,font family etc.

Major CSS Font Properties are:

1.Font Family

2.Font Size

3.Font Style

4.Font Weight

5.Font Variant.

Dear, learner here you can learn how to use css font properties with proper example:

1.Font Family:

The font family property  select the specific font for a web text which will be displayed in the browser.

For Example:

<style>          /* ….>starting  of internal css*/

p  {    

font-family:Arial Black;

}

</style>       /* end of internal css*/

Example in HTML:

<html>

<head>

<title> Font Family tutorial<title>

<style>          /* ….>starting  of internal css*/

{

font-family:Arial Black;

}

</style>       /* end of internal css*/

</head>

<body>

<p>This an example of font-family: Arial Black;</p>/* call of internal css/*

</body>

</html>

Output of the HTML code:

This an example of font-family: Arial Black;

2.Font Size:

Font Size property select the specific font size like small,large,x-large,cm,%,PX(pixel) are most commonly used in web developing.

 Example in HTML code:

<html>
<head>
<title> Font Family tutorial </title>
<style>          /* ….>starting  of internal css*/

p  {
font-family:Arial Black;
font-size:100%;
}
</style>
</head>
<body>
<p> This an example of font-family: Arial Black and font-size:100%;</p>
</body>
</html>

If we write it on a notepad & run in a Browser then we can see:

This an example of font-family: Arial Black and font-size:100%;

We can also write following ways to represent font-size property:

  • p{ font-size:14px;}
  • p{font-size:0.5cm;}
  • p{font-size:small;}
  • p{font-size:large;}

3.Font Style:

The font-style property defines a specific style to show in a browser.Several types font-style are used in css font styling:

 Example in HTML code:

<html>
<head>
<title> Font Family tutorial </title>
<style>          /* ….>starting  of internal css*/

p  {
font-family:Arial Black;
font-size:100%;
font-style:italic;
}
</style>
</head>
<body>
<p> This an example of font-family: Arial Black and font-size:100% & font-style:italic;</p>
</body>
</html>

We can also write following way to represent font-style property:

  • p{font-style:normal;}
  • p{font-style:oblique:}
  • p{font-style:inherit}

4.Font Weight:

Font-weight property defines the weight of the text in a web site, it can be 100 to 900 or bold,normal etc.

 Example in HTML code:

<html>
<head>
<title> Font Family tutorial </title>
<style>          /* ….>starting  of internal css*/

  {

font-size:100%;
font-style:italic;
font-weight:bold;
}
</style>
</head>
<body>
<p> This an example font-size:100% & font-style:italic,font-weight:bold;</p>
</body>
</html>

If we write it on a notepad & run in a Browser then we can see:

This an example font-size:100% & font-style:italic,font-weight:bold;

We can also write following ways to represent font-weight property:

  • p{font-weight: normal;}
  • p{font-weight: bolder:}
  • p{font-weight: inherit}
  • p{font-weight:900;}
  • p{font-weight:lighter;}

5.Font Variant:

Font-variant property indicates where the  small-caps  font will display.small-caps means all the letter in a paragraph will be displayed       in a capital letter.

 Example in HTML code

<html>
<head>
<title> Font Family tutorial </title>
<style>          /* ….>starting  of internal css*/

  {
font-family:Arial Black;

font-weight:bold;
font-size:100%;
font-style:italic;
      font-variant:small-caps;
}
</style>
</head>
<body>
<p> This an example of font-variant:small-caps,font-size:100% ,font-style:italic,font-weight:bold;</p>
</body>
</html>

The output of the above code:

THIS AN EXAMPLE FONT-SIZE:100% & FONT-STYLE:ITALIC,FONT-WEIGHT:BOLD;

We can also write following ways to represent font-variant property:

  • p{font-variant: normal;}
  • p{font-variant: inherit;}

Related Post or  you may interest