Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 Apply Global Font to the Entire HTML Document?
Sometimes we want to set a base attribute to everything and allow more specific selectors to adjust it for certain elements as needed. There are also cases, especially when doing brief temporary testing, where we want a font to apply to all text no matter what.
Ways to Set Global Font
You can use the below-mentioned approaches to set the global font to your entire HTML document.
Get Started with Approaches
Here you will see an example of each approach mentioned above to set the global font to the entire HTML document.
Using Universal Selector
we can use the CSS universal selector (*) to select your whole HTML document and define your font family. So the whole HTML document will follow that define font family on all the elements.
Example
Here in the following example, we will use the above-mentioned approach.
<!DOCTYPE html>
<html>
<head>
<title>Online HTML Editor</title>
<style>
* {
font-family: Verdana !important;
}
</style>
</head>
<body>
<h1>Online HTML Editor</h1>
<p>This is real time online HTML Editor</p>
</body>
</html>
Output
Using !important Keyword
The CSS !important keyword will be required if you accidentally define any font family to an element that can be overridden by this !important keyword.
Example
Here in this example, we will apply a font family using unerversal attributes and also define another font family on a particular element.
<!DOCTYPE html>
<html>
<head>
<title>Online HTML Editor</title>
<style>
/* Has priority over all other font-family
declarations in the document */
* {
font-family: Verdana !important;
}
/* This won't apply due to !important */
p {
font-family: Arial;
}
</style>
</head>
<body>
<h1>Online HTML Editor</h1>
<p>This is real time online HTML Editor</p>
</body>
</html>
Output
Conclusion
Now that you know how to set attributes for an entire document broadly, it is crucial to keep in mind when it is okay to do so. One of the most important features of HTML/CSS is the ability to have fine control over the appearance of elements based on tags, IDs, etc. While it is okay to use * to set fonts for the entire page, you should exercise caution because it may disrupt your ability to change fonts more precisely later. The !important can be very powerful but it weakens the versatility of the rest of your CSS.
360 Views
