There are times when you want to revert bold text back to its normal weight in your HTML documents. This article will guide you through various methods to unbold text in HTML, including inline CSS, internal CSS, and external CSS. By the end of this tutorial, you’ll know how to use each method effectively for different scenarios.
Table of Contents
Inline CSS
Inline CSS is used to apply styles directly to an HTML element using the “style” attribute. This method is useful when you need to unbold a small amount of text or apply a unique style to a single element. Here’s an example:
<html>
<head>
<title>Unbold Text Example</title>
</head>
<body>
<p>This text is normal.</p>
<p style="font-weight: normal;">This text was unbolded using inline CSS.</p>
</body>
</html>
In the example above, we’ve used the “style” attribute to set the “font-weight” property to “normal” for the second paragraph. This will unbold the text within that paragraph.
Internal CSS
Internal CSS is used to define styles within the head section of an HTML document using the “style” element. This method is useful when you need to unbold text in multiple elements without repeating the same inline CSS code. Here’s an example:
<html>
<head>
<title>Unbold Text Example</title>
<style>
.unbold {
font-weight: normal;
}
</style>
</head>
<body>
<p>This text is normal.</p>
<p class="unbold">This text was unbolded using internal CSS.</p>
</body>
</html>
In the example above, we’ve created a CSS class called “unbold” and set its “font-weight” property to “normal.” To unbold the text in the second paragraph, we’ve added the “unbold” class to it.
External CSS
External CSS is used to define styles in a separate file with the “.css” extension. This method is ideal when you need to apply consistent styles across multiple HTML pages. First, create a new file called “styles.css” and add the following content:
.unbold {
font-weight: normal;
}
Next, link the external CSS file to your HTML document using the “link” element:
<html>
<head>
<title>Unbold Text Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This text is normal.</p>
<p class="unbold">This text was unbolded using external CSS.</p>
</body>
</html>
In the example above, we’ve linked the “styles.css” file to our HTML document. The “unbold” class defined in the external CSS file is applied to the second paragraph, unbolding the text within it.
Conclusion
Unbolding text in HTML can be achieved using various methods such as inline CSS, internal CSS, and external CSS. The method you choose depends on your specific requirements, such as the number of elements you need to unbold or whether you want to apply consistent styles across multiple pages. By mastering these techniques, you’ll have full control over the styling of your text in HTML.
Do you want to learn more about HTML, CSS, and web development? Check out our other articles, like Mastering JavaScript: A Comprehensive Guide to DOM Manipulation and Event Handling for Interactive Websites and Powerful Python Tips: Web Scraping.
Stay updated with the latest web development trends and techniques by subscribing to our newsletter!
