1. Home
  2. /
  3. CSS Tutorial
  4. /
  5. Which CSS property controls the text size?

Which CSS property controls the text size?

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.

Which CSS property controls the text size
Which CSS property controls the text size

Also read: What Is CSS Explain It? And CSS Example? | Types Of CSS?

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.

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>

Also read: How To Add CSS In 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

<!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>

Also read: How To Link CSS To HTML With 3 Methods?

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.

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>

Font Size

It is used to set the font size of an HTML element. Font size can be set in different ways like Pixel, Percent, EMI. Using this you can set the value of the font.

For Example

<!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>

Also read: How To Link CSS To HTML With 3 Methods?

FAQ

Which CSS property controls the text size?

font-size CSS property | The font-size CSS property sets the size of the font.

How do you change the text size in CSS?

To change the size of your text with inline CSS, you have to do it with the style attribute. You type in the font-size property and then assign it a value.

Leave a Reply

Your email address will not be published.