Font In CSS

Example 1 Font Size

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS font-size property
    </title>

    <!-- CSS style to set font-size property -->
    <style>
        .xxsmall {
            color: green;
            font-size: xx-small;
        }

        .xsmall {
            color: green;
            font-size: x-small;
        }

        .small {
            color: green;
            font-size: small;
        }

        .medium {
            color: green;
            font-size: medium;
        }

        .large {
            color: green;
            font-size: large;
        }

        .xlarge {
            color: green;
            font-size: x-large;
        }

        .xxlarge {
            color: green;
            font-size: xx-large;
        }
        .inpx {font-size: 20px;}
    </style>

</head>
<body>

    <h1>font-size property</h1>
    <div class="xxsmall">font-size: xx-small;</div>
    <div class="xsmall">font-size: x-small;</div>
    <div class="small">font-size: small;</div>
    <div class="medium">font-size: medium;</div>
    <div class="large">font-size: large;</div>
    <div class="xlarge">font-size: x-large;</div>
    <div class="xxlarge">font-size: xx-large;</div>
    <div class="inpx">font-size: 20px;</div>
</body>
</html>

Example 2 Font Style


<!DOCTYPE html>
<html>
<head>
    <title> CSS | font-family Property </title>
    <style>
    .para1 {
        font-style: normal;
    }  
    .para2 {
        font-style: oblique;
    }
    .para3{
        font-style: italic;
    }
    </style>
</head>

<body>
    <h1>Font-family Property</h1>

    <p class="para1">Predrag in cursive font</p>

    <p class="para2">Predrag system in oblique font.</p>

    <p class="para3">Predrag system in italic font.</p>

</body>
</html>

Example 3 Font weight


<!DOCTYPE html>
<html>
<head>
    <title> CSS | font-family Property </title>
    <style>
    .para1 {
        font-weight: lighter;
    }
   
    .para2 {
        font-weight: bold;
    }
    .para3{
        font-weight: bolder;
    }
    </style>
</head>

<body>
    <h1>Font-family Property</h1>

    <p class="para1">Predrag system in lighter font.</p>

    <p class="para2">Predrag system in bold font.</p>

    <p class="para3">Predrag system in bolder font.</p>

</body>
</html>

Example 4 Font Family


<!DOCTYPE html>
<html>
<head>
    <title> CSS | font-family Property </title>
    <style>
    .para1 {
        font-family: cursive;
    }
   
    .para2 {
        font-family: fantasy;
    }
    .para3{
        font-family: monospace;
    }
    </style>
</head>

<body>

    <h1>Font-family Property</h1>

    <p class="para1">Predrag in cursive font</p>

    <p class="para2">Predrag sysytem in fantasy font.</p>

    <p class="para3">Predrag sysytem in monospace font.</p>

</body>
</html>

Example 4 Font Variant

<!DOCTYPE html>
<html>
    <head>
        <title>

        </title>
        <style type="text/css">
            .para1{
                font-variant: small-caps;
            }
        </style>
    </head>
    <body>
        <h1>Normal Text</h1>
        <p>Predrag in cursive font</p>
        <h1 style="font-variant: small-caps;">After Apply font-variant Property</h1>
        <p class="para1">Predrag in cursive font</p>
    </body>
</html>