CSS Bold Text
The font-weight property in CSS is used to set the weight or thickness of the font. It specifies how thin or thick the characters in a text. The font-weight property is either dependent on the weights specified by the browser or the available font faces in a font family. This CSS property defines thin to thick characters.
It supports predefined numeric values or keyword options. The acceptable keywords for this attribute include regular, bold, lighter, and heavier. As for the numeric values, they can range from 100 to 900, increasing in increments of 100. A higher numeric value signifies a heavier font-weight compared to lower values.
Syntax
font-weight: normal | bold | bolder | lighter | number | initial | inherit;
The digit in the preceding syntax indicates numerical values. The numerical value 400 corresponds to the keyword value "normal", while the value 700 corresponds to the keyword value "bold".
The regular strong> value denotes standard characters, while the bold value indicates thicker characters. The heavier value signifies a more pronounced font-weight, and the lighter value indicates a font-weight that is less than the weight inherited from the parent element.
Let's explore how to make text bold in CSS through a visual representation.
Introduction
CSS is widely recognized as a potent asset in web development. It enables us to customize HTML content in a variety of manners. An essential aspect of web page styling involves utilizing the font-weight property. By employing bold text, we can highlight crucial information, create visual distinctions, and enhance content legibility.
Understanding Font-Weight Property
Within CSS, the Font-Weight attribute plays a crucial role in specifying the thickness or heaviness of a font. This property dictates the level of boldness or lightness in text, with higher values signifying a more pronounced boldness. The font-weight attribute is versatile, allowing for the input of different values including numeric and keyword options.
The numeric values range from 100 to 900, increasing in increments of 100. For instance, a font-weight of 400 is classified as regular, whereas a font-weight of 700 is identified as bold. Bold, bolder, lighter, and a few other keyword values are frequently employed.
How to Create Bold Text with CSS
We have the ability to generate bold text in HTML by utilizing CSS. The font-weight property can be applied inline, internally, or externally to achieve this effect.
1. How We Can Create the Bold Text with Inline Styling
By leveraging inline styling, we have the ability to apply the font-weight attribute directly to a particular HTML element. To illustrate this, let's consider a practical scenario.
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="font-weight: bold;">Welcome to C# Programming</p>
<p style="font-weight: bold;">This is a bold text</p>
</body>
</html>
Output
Explanation:
In the preceding code snippet, inline CSS was utilized to implement the font-weight attribute with a value of bold.
2. How We Can Create Bold Text with Internal Styling
Here, we need to include the CSS property within the head section using the style tag. Let's consider an illustration:
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
font-weight: bold;
}
</style>
</head>
<body>
<p>Welcome to C# Programming</p>
<p>This is a bold text</p>
</body>
</html>
Output
Explanation:
In the previous example, internal CSS was utilized to implement the font-weight property.
3. How We Can Create Bold Text with External Styling
Here, we need to generate an external CSS file and connect it to the HTML file. Within the CSS file, we must specify the style properties. Consider the following illustration.
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<p>Welcome to C# Programming</p>
<p>This is a bold text</p>
</body>
</html>
CSS code:
p {
font-weight: bold;
}
Output
Explanation:
In the provided code snippet, we utilized the external CSS attribute to apply the font-weight style.
Example
Let's explore how to generate bold text in various tones through the example provided below:
<!DOCTYPE html>
<html>
<body>
<style>
p{
font-size: 20px;
}
</style>
<p style="font-weight: normal;">This font is normal.</p>
<p style="font-weight: bold;">This font is bold.</p>
<p style="font-weight: lighter;">This font is lighter.</p>
<p style="font-weight: bolder;">This font is bolder.</p>
<p style="font-weight: 100;">This font is 100 weight.</p>
<p style="font-weight: 200;">This font is 200 weight.</p>
<p style="font-weight: 300;">This font is 300 weight.</p>
<p style="font-weight: 400;">This font is 400 weight.</p>
<p style="font-weight: 500;">This font is 500 weight.</p>
<p style="font-weight: 600;">This font is 600 weight.</p>
<p style="font-weight: 700;">This font is 700 weight.</p>
<p style="font-weight: 800;">This font is 800 weight.</p>
<p style="font-weight: 900;">This font is 900 weight.</p>
</body>
</html>
Output