How to change the font size using CSS?

CSS, or Cascading Style Sheets, is a powerful tool for controlling the visual presentation of a webpage. One aspect of this is the ability to adjust the font size of text elements on the page. This can be done by using the font-size property.

To set a specific font size for a particular element, we use a class or ID selector in conjunction with the font-size property.

In this article we will see multiple example to change the font size using CSS -

By using the font-size property, we can set a specific font size for a specific element or class. For example, to set the font size of a element to 18 pixels, we will use the following code ?

P{
   font-size:18px;
}

Example


   How to change the font size using CSS
   


   

Welcome to tutorialspoint

Change the font size using CSS

This is normal paragraph

We can also use the font-size property to set a relative font size, such as larger or smaller, which will change the font size in relation to the parent element's font size. Fro doing this, we will use the following code ?

P{
   font-size:larger;
}

Example


   How to change the font size using CSS
   


   

Welcome to tutorialspoint

Change the font size using CSS - Large font

Change the font size using CSS - Small font

This is normal paragraph

Another way to target specific words is by using the :not css selector. This allows to target all the words in an element, except the unique word. For example ?

CSS

p span:not(.unique) {
   font-size: 18px;
} 

HTML

This is a not unique word, but this word is unique.

Example

   
      How to change the font size using CSS
      
   
   
      

Lorem Ipsum is simply dummy text of not unique the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, not unique when an unknown printer took a galley of type and scrambledg,

The font-size property in CSS allows for precise control over the size of text elements on a webpage. Whether we want to set a specific font size for a particular element, adjust the font size in relation to the parent element's font size or target specific words, CSS provides the necessary tools to accomplish this.

Updated on: 2023-03-09T14:35:21+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements