Which CSS property controls the text size?

795 views topfaida@admin February 9, 2022 ☆ ☆ ☆ ☆ ☆ 0 0

The CSS font-size property sets the font size of any text element on your page or website.

Hello friends, in today’s article we are going to tell you, that property of CSS which controls the size of any text. So if you want to know about him then definitely read this article. So without delay let’s start understanding CSS text size property.

Introduction to Font Properties?

Whenever a paragraph is written in HTML. So there is a normal font show. If a heading is written. So there is a different font show. This is by default the font property of HTML. Which is found through HTML tags. But you can change the font by using CSS. That is, the font can be changed according to your own.

Uses of CSS font property?

Font Property is used in CSS to control Look and Texts. With CSS, you can change Fonts Size, Style, Weight, Line-height, etc.

Also Read: Which is the Correct CSS Syntax?

Which CSS property controls the text size?

With which property of CSS we can change the font size of the text?

In CSS, we use a property named font-size, with the help of which we are able to change the size of any font. Let us see its syntax, how it is used in CSS.

Syntax :- font-size: 25px;

Example: – Now we will talk about how you can change the size of any font. You follow the example given below.

<html>
  <head>
     <title>Font Size Example</title>
     <style>
        p{
          font-size: 25px;
        }
     </style>
  </head>
  <body>
     <p>heading</p>
  </body>
</html>

All CSS Font Properties

font-family Property
font-size Property
font-style Property
font-variant Property
font-weight Property

Font Family

The Font Family Property specifies the font for an element. Font Family Property can have many Font Names as Fallback System. If the browser does not support the first font, then it tries the next font.

Also Read: What is CSS explain it? and CSS example? | Types of CSS?

For Example

<!DOCTYPE HTML>
<html>
   <head>
     <title>Font Family Example</title>
   </head>
   <body>
      <p style="font-family:georgia,garamond,serif;">
      This text is rendered in either georgia, garamond, or the default serif
      font depending on which font  you have at your system.
      </p>
   </body>
</html>

Font Style

It is used to specify the font style of the HTML element. Font Style can have three values Normal, Italic or Oblique.

For Example

Also Read: in css what does h1 can be called as

<!DOCTYPE HTML>
<html>
   <head>
     <title>Font Style Example</title>
   <style>
      h2{ font-style: oblique; }
      p { font-style: italic; }
      h3 { font-style: normal; }
   </style>
   </head>
   <body>
      <h2>Wellcome to My Website </h2>
      <p>This text will be prepare, in italic style</p>
      <h3>My Name is Ammu.</h3>
   </body>
</html>

Font Variant

It is used to make small caps. It can be normal or small caps. Although it does not work in all fonts.

For Example

<!DOCTYPE HTML>
<html>
   <head>
     <title>Font Variant Example</title>
   <style>
      p{font-variant: small-caps;}
   </style>
   </head>
   <body>
      <p>Wellcome to My Website</p>
   </body>
</html>

Font Weight

Font Weight Property defines the boldness and thickness of any font. Its value range is up to 100-900. Apart from this, you can also use some Keyword Like This Normal, Bold, Bolder, Lighter, etc. In the condition of not setting any value, its Value By Default is Normal.

Also Read: How to add a background image in CSS?

For Example

<!DOCTYPE HTML>
<html>
   <head>
      <title>Font Weight Example</title>
   </head>
   <body>
      <p style="font-weight:bold;">This font is bold.</p>
      <p style="font-weight:bolder;">This font is bolder.</p>
      <p style="font-weight:300;">This font is 300 weight.</p>
   </body>
</html>

<!DOCTYPE HTML>
<html>
   <head>
      <title>Font Size Example</title>
      <style>
         h1 {
            font-size: 250%;
         }
         h2 {
            font-size: 200%;
         }
         p {
            font-size: 100%;
         }
      </style>
   </head>
   <body>
      <h1>Wellcome to My Website</h1>
      <h2>My Name is Ammu</h2>
      <p>I Live in Telangana.</p>
   </body>
</html>

FAQ