Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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
<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>
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
<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>
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
<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>
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>
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.
921 Views
