Introduction:

In this article we are going to learn what is Font property in css or how to use Font property in css or how to look of text using Font property in css with example.

 

Description:

 

CSS Font property is used to change the look of texts. By using CSS font property you can change the text style, variant, weight, size, height and text font-family text bold or underlined. Here, you will also know how to resize your font using percentage.

 

These are some important font attributes:


CSS Font color: This property is used to change the color of the text.  

CSS Font family: This property is used to change the face of the font.

CSS Font size: This property is used to increase or decrease the size of the font.

CSS Font style: This property is used to make the font bold, italic or oblique.

CSS Font variant: This property creates a small-caps effect.

CSS Font weight: This property is used to increase or decrease the boldness and lightness of the font.

 

Let’s see, Example of CSS Font property:

 

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-size: 100%;
        }
 
        h1 {
            color: red;
            font-family: sans-serif;
        }
 
        h2 {
            color: #9000A1;
            font-family: serif;
        }
 
        h3 {
            font-variant: normal;
            font-style: italic;
        }
 
        h4 {
            font-style: oblique;
        }
 
        h5 {
            font-style: normal;
        }
 
        p {
            color: rgb(0, 220, 98);
            font-family: monospace;
            font-variant: small-caps;
        }
    </style>
</head>
<body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
 
    <h3>This heading is shown in italic font.</h3>
    <h4>This heading is shown in oblique font.</h4>
    <h5>This heading is shown in normal font.</h5> 
 
    <p>This is a paragraph.</p>
    <p style="font-size: 200%; font-weight: bold;">  This font size is set on 200%. </p>
    <p style="font-size: 20px; font-weight: 800;">  This font size is 20 pixels.  </p>    </body>
</html>  


 Let's check live example

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like