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>
CSS Font size is used to set the font size of your browser. The default text size in the browser is 16 px. 1 em is equal to your current text size. Here, 1 em = 16 px. If your default text size is 25 px then 1 em = 25 px.
Syntax:
font-size: smaller | xx-small | x-small | small | medium | large | x-large | xx-large | larger | length | % | initial | inherit;
Property Value:
Property Value
Description
1. smaller
set the font-size smaller than its parent size
2. xx-small
set the font-size to an xx-small size
3. x-small
set the font-size to an x-small size
4. small
set the font-size to an small size
5. medium
set the font-size to medium size. This is a default font-size.
6. large
set the font-size to a large size
7. x-large
set the font-size to an extra-large size
8. xx-large
set the font-size to a double extra large size
9. larger
set the font-size to a larger size than its parent size
10. length
set the font-size in a fixed size defined by px, em, in, etc.
11. %
set the font-size to a percentage value.
12. initial
set the font-size to its default value.
13. inherit
Inherit the font-size to its parent value.
Scroll down to see each font-size output with example.
1. smaller
Definition:
It sets the font size smaller than its parent size
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.smaller {
border: 3px solid black;
background-color: pink;
font-size: smaller;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="smaller">This is a paragraph with a smaller font size.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.xx-small {
border: 3px solid black;
background-color: pink;
font-size: xx-small;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="xx-small">This is a paragraph with a xx-small font size.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.x-small {
border: 3px solid black;
background-color: pink;
font-size: x-small;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="x-small">This is a paragraph with a x-small font size.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.small {
border: 3px solid black;
background-color: pink;
font-size: small;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="small">This is a paragraph with a small font size.</div>
</body>
</html>
It sets the font size to medium size. This is a default font size.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.medium {
border: 3px solid black;
background-color: pink;
font-size: medium;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="medium">This is a paragraph with a medium font size.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.large {
border: 3px solid black;
background-color: pink;
font-size: large;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="large">This is a paragraph with a large font size.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.x-large {
border: 3px solid black;
background-color: pink;
font-size: x-large;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="x-large">This is a paragraph with an extra large font size.</div>
</body>
</html>
It sets the font size to double the extra-large size.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.xx-large {
border: 3px solid black;
background-color: pink;
font-size: xx-large;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="xx-large">This is a paragraph with a double extra large font size.</div>
</body>
</html>
It sets the font size to a larger size than its parent size
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.larger {
border: 3px solid black;
background-color: pink;
font-size: larger;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="larger">This is a paragraph with a larger font size.</div>
</body>
</html>
It sets the font size in a fixed size defined by px, em, in, etc.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.px {
border: 3px solid black;
background-color: pink;
font-size: 15px;
}
.em {
border: 3px solid black;
background-color: pink;
font-size: 2em;
}
.in {
border: 3px solid black;
background-color: pink;
font-size: 0.2in;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="px">This is a paragraph with a 15px font size.</div>
<div class="em">This is a paragraph with a 2em font size.</div>
<div class="in">This is a paragraph with a 0.2in font size.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.percentage{
border: 3px solid black;
background-color: pink;
font-size: 50%;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="percentage">This is a paragraph defined in a 50% percentage font size.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.initial{
border: 3px solid black;
background-color: pink;
font-size: initial;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="initial">This is a paragraph set the font-size to its initial default value.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.default {
border: 3px solid black;
background-color: pink;
}
.inherit{
border: 3px solid black;
background-color: pink;
font-size: inherit;
}
</style>
</head>
<body>
<div class="default">This is a paragraph with a default font size.</div>
<div class="inherit">This is a paragraph set the font-size inherit to its parent value.</div>
</body>
</html>