CSS Font Weight
In CSS, the font-weight
property is used to specify the thickness or boldness of a font. It allows you to control the visual weight of text elements on your web page, making them appear lighter or bolder as needed. The font-weight
property accepts a variety of values that range from 100
(thin) to 900
(bold), providing you with fine-grained control over the appearance of text.
Syntax​
The font-weight
property in CSS has the following syntax:
selector {
font-weight: value;
}
selector
: The CSS selector that targets the text element you want to apply the font weight to.value
: A numeric or keyword value that represents the thickness of the font. Thefont-weight
property accepts the following values:normal
: Sets the font weight to the normal level (equivalent to400
).bold
: Sets the font weight to a bold level (equivalent to700
).bolder
: Increases the font weight relative to the parent element.lighter
: Decreases the font weight relative to the parent element.100
to900
: Numeric values that represent the font weight, with100
being the thinnest and900
being the boldest.
Examples​
1. Setting the Font Weight to Bold​
You can use the font-weight
property to make text elements appear bold by setting the value to bold
. In the following example, we make a paragraph element bold:
- index.html
- index.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bold Text</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<p class="bold-text">This text is bold.</p>
</body>
</html>
.bold-text {
font-weight: bold;
}
This text is bold.
The font-weight
property can be applied to various text elements, such as headings, paragraphs, and spans, to create different visual styles.
2. Using Numeric Values for Font Weight​
You can specify the font weight using numeric values ranging from 100
to 900
. In the following example, we set the font weight of a heading element to 700
(bold):
- index.html
- index.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bold Heading</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1 class="bold-heading">This is a bold heading.</h1>
</body>
</html>
.bold-heading {
font-weight: 700;
}
This is a bold heading.
3. Adjusting Font Weight Relative to Parent Element​
You can use the bolder
and lighter
values to adjust the font weight relative to the parent element. In the following example, we make a paragraph element lighter than its parent:
- index.html
- index.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lighter Text</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="parent-element">
<p class="lighter-text">This text is lighter than the parent.</p>
</div>
</body>
</html>
.parent-element {
font-weight: bold;
}
.lighter-text {
font-weight: lighter;
}
This text is lighter than the parent.
The bolder
and lighter
values adjust the font weight relative to the parent element's font weight. If the parent element has a font weight of normal
, the bolder
value will make the text bold, while the lighter
value will make it lighter.
4. Using font-weight
with Other Properties​
You can combine the font-weight
property with other text properties to create custom text styles. In the following example, we set the font weight, font size, and font family of a paragraph element:
- index.html
- index.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Text Style</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<p class="custom-text">This is custom text.</p>
</body>
</html>
.custom-text {
font-weight: bold;
font-size: 1.2em;
font-family: Arial, sans-serif;
}
This is custom text.
Conclusion​
The font-weight
property in CSS allows you to control the thickness of text elements on your web page, making them appear lighter or bolder as needed. By using the font-weight
property with different values, you can create visually appealing text styles that enhance the readability and aesthetics of your content. Experiment with the font-weight
property to find the right balance of boldness for your text elements.