जिस तरह से font-family और font-style किसी website के लिए important होती है ठीक उसी तरह से font-size भी user experience increase करता है , CSS में font-size property का use करके हम , font का size set करते हैं।

element{
  font-size : 20px;
}

Hello ! my name is Rahul.

And this is all about me.

And this is also about me :).

CSS font-size example

CopyFullscreenClose FullscreenRun
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS font-size example</title>
  </head>
  <body>
    <p style="font-size:40px">Hello ! my name is Rahul.</p>
    <p style="font-size:30px">And this is all about me.</p>
    <p style="font-size:20px">And this is also about me :).</p>
  </body>
</html>

हालाँकि ये जरूरी नहीं कि font-size को px में ही define करें , आप percent या rem/em में भी define कर सकते हैं। 1 rem/em में 16 px होते हैं।

p{
  font-size : 100% /*100 % means full default value*/

  or 

  font-size : 2 em / rem


  1 em / rem = 16px;
}

Text with 3 rem size.

Text with 2 rem size.

Text size with 100%.

Text size with 50%.

CopyFullscreenClose FullscreenRun
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS font-size example</title>
  </head>
  <body>
    <p style="font-size:3rem">Text with 3 rem size.</p>
    <p style="font-size:2em">Text with 2 rem size.</p>
    <p style="font-size:100%">Text size with 100%.</p>
    <p style="font-size:50%">Text size with 50%.</p>
  </body>
</html>

Related Topics :

Rahul Kumar

Rahul Kumar

Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)

Get connected with me. :) LinkedIn Twitter Instagram Facebook

b2eprogrammers