![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS font-weight Property
![CSS font-weight Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-font-weight.webp)
Photo Credit to CodeToFun
🙋 Introduction
The font-weight
property in CSS is used to set the weight (or boldness) of the font.
This property allows web developers to adjust the thickness of the text, enhancing readability and emphasizing important content.
The font-weight
property is versatile and can be applied to headings, paragraphs, and other text elements to achieve various design effects.
💡 Syntax
The syntax for the font-weight
property is straightforward. It can be applied to any text-containing element.
element {
font-weight: value;
}
Here, value can be one of several predefined keywords or numeric values that correspond to different font weights.
🎛️ Default Value
The default value of the font-weight
property is normal, which corresponds to a font weight of 400.
🏠 Property Values
Value | Description |
---|---|
normal | Sets the font weight to normal (equivalent to 400). |
bold | Sets the font weight to bold (equivalent to 700). |
bolder | Sets the font weight to one level bolder than the inherited weight. |
lighter | Sets the font weight to one level lighter than the inherited weight. |
100 to 900 | Numeric values representing different levels of font weight, where 400 is normal and 700 is bold. |
📄 Example
In this example, we'll change the font weight of a paragraph to bold and set the heading to a lighter weight.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS font-weight Example</title>
<style>
h1 {
font-weight: 300;
}
p {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Heading with Lighter Font Weight</h1>
<p>Paragraph with Bold Font Weight</p>
</body>
</html>
🖥️ Browser Compatibility
The font-weight
property is well-supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. This ensures consistent rendering of text weight on different devices and platforms.
🎉 Conclusion
The font-weight
property is an essential tool for web developers aiming to enhance text readability and emphasize important content.
By adjusting the weight of the font, you can create a more engaging and visually appealing website. Experiment with different font weights to see how they can improve the overall design and user experience of your web projects.
👨💻 Join our Community:
Author
![author](https://codetofun.com/wp-content/themes/codetofun/images/mari-selvan-400.webp)
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (CSS font-weight Property), please comment here. I will help you immediately.