How To Set Font Size For P Element With Em Using CSS

admin_img Posted By Bajarangi soft , Posted On 02-11-2020

In CSS The font-size property sets the size of the text and To allow users to resize the text many developers use em instead of pixels.1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.The size can be calculated from pixels to em using this formula: pixels/16=em. So today we discuss how to set font size with em using css.

How To Set Font Size For P Element With Em Using CSS

Step 1:Create index.html file and implement as below code in it.

<p class="p1">am p element paragraph.</p>
<p class="p2">am another p element paragraph.</p>

Step 2:Implement CSS code as below to control font size.

<style>
    body {
        background: #2e9ad0;
    }

    .p1 {
        font-size: 1.875em; /* 30px/16=1.875em */
    }
    .p2 {
        font-size: 0.875em; /* 14px/16=0.875em */
    }
</style>

Complete Code For Setting Font Size For P Element With Em Using CSS.

<!DOCTYPE html>
<html>
<head>
    <title>How To Set Font Size For P Element With Em Using CSS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    body {
        background: #2e9ad0;
    }

    .p1 {
        font-size: 1.875em; /* 30px/16=1.875em */
    }
    .p2 {
        font-size: 0.875em; /* 14px/16=0.875em */
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h1 id="color" style="color: white;">Set Font Size For P Element With Em Using CSS</h1>
    </div>
    <br>
    <div class="well">
        <p class="p1">am p element paragraph.</p>
        <p class="p2">am another p element paragraph.</p>
    </div>
    <br>
</div>
</body>
</html>

Related Post