How to change font size using CSS?-CSS Tutorial-php.cn

How to change font size using CSS?

PHPz

Release： 2023-09-23 21:05:03

forward

1431 people have browsed it

How to change font size using CSS?

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

To set a specific font size for a specific element, we use a class or ID selector with the font-size attribute.

In this article we will see multiple examples of changing font size using CSS -

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

P{
   font-size:18px;
}

Copy after login

Example

<html>
<head>
   <title>How to change the font size using CSS</title>
   <style>
      .p1{
         font-size:20px;
      }
   </style>
</head>
<body>
   <h1>Welcome to tutorialspoint</h1>
   <p class="p1">Change the font size using CSS</p>
   <p>This is normal paragraph</p> 
</body>
</html>

Copy after login

We can also use the font-size attribute to set a relative font size, such as larger or smaller, which will change the font size relative to the font size of the parent element. For this we will use the following code -

P{
   font-size:larger;
}

Copy after login

Example

<html>
<head>
   <title>How to change the font size using CSS</title>
   <style>
      .p1{
         font-size:large;
      }
      .p2{
         font-size:small;
      }
   </style>
</head>
<body>
   <h1>Welcome to tutorialspoint</h1>
   <p class="p1">Change the font size using CSS - Large font</p>
   <p class="p2">Change the font size using CSS - Small font</p>
   <p>This is normal paragraph</p>
</body>
</html>

Copy after login

Another way to target specific words is to use the :not css selector. This allows targeting all but the unique word in the element. For example -

CSS

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

Copy after login

HTML

<p>This is a <span class="not-unique">not unique</span> word, but this <span class="not-unique">word</span> is <span class="unique">unique</span>.</p>

Copy after login

Example

<html>
   <head>
      <title>How to change the font size using CSS</title>
      <style>
         p span:not(.unique) {
            font-size: 20px; 
         }
      </style>
   </head>
   <body>
      <p>Lorem Ipsum is simply dummy text of <span class="notunique">not unique</span> the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <span class="not-unique">not unique</span> when an unknown printer took a galley of type and scrambledg,</p>
   </body>
</html>

Copy after login

The font-size property in CSS allows precise control over the size of text elements on a web page. Whether we want to set a specific font size for a specific element, adjust the font size based on the font size of the parent element, or target a specific word, CSS provides the necessary tools to do so.

The above is the detailed content of How to change font size using CSS?. For more information, please follow other related articles on the PHP Chinese website!