CSS font-weight is used to set the boldness of the font. Its property values are normal, bold, bolder, lighter, or defined in hundreds like 100, 200, 300,…. up to 900. 100 is the lightest, 400 is the normal font-weight and 700 is the same as bold value.
Font-weight can be defined in number from 100 to 900, which is from lighter to bolder. 100 is the lighter font-weight. 400 is the normal font-weight and 700 is the bolder font-weight. Let see each font-weight output using in number.
5.1) font-weight: 100;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.number{
border: 3px solid black;
background-color: pink;
font-weight: 100;
}
</style>
</head>
<body>
<div class="number">This is a paragraph with font-weight is equal to 100. This font-weight is as same as lighter.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.number{
border: 3px solid black;
background-color: pink;
font-weight: 400;
}
</style>
</head>
<body>
<div class="number">This is a paragraph with font-weight is equal to 400. 400 is the same as normal.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.initial{
border: 3px solid black;
background-color: pink;
font-variant: initial;
}
</style>
</head>
<body>
<div class="initial">This is a paragraph, where the fonts are matched to its default value.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.inherit{
border: 3px solid black;
background-color: pink;
font-variant: inherit;
}
</style>
</head>
<body>
<div class="inherit">This is a paragraph, where its property is inherited from its parent value.</div>
</body>
</html>
CSS font-style is used to style the text. It can be normal, italic and oblique.
Syntax:
font-style: normal | italic | oblique
Property Value:
- Normal
- Italic
- Oblique
1. font-style: normal
Definition:
font-style: normal specify the normal text. This is the default font. This font is used if you have previously defined font-style in italic or oblique and want to change back to normal font-style.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.italic{
border: 3px solid black;
background-color: pink;
font-style: italic;
}
.normal{
border: 3px solid black;
background-color: pink;
font-style: normal;
}
</style>
</head>
<body>
<p class="italic">Previously, the font is defined in italic.</p>
<p class="normal">Here, the font is in normal style.</p>
</body>
</html>