CSS Icons play an important role in your webpage which makes your web page look more professional and elegant. It is very easy to use CSS Icons on your web page from icon libraries like Font Awesome Icons, Bootstrap Icons,or Google Icons.
Let’s see each CSS icon uses with examples.
1) Font Awesome Icons
You can use the font-awesome icons with a single code. The step is pretty simple and easy. First of all, you need to visit the Font Awesome Icons Site which is www.fontawesome.com, create an account, and get a code of the icons you need to use. Apply the font awesome code in the header section
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>
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>
There are two types of CSS Font Family i.e, generic family and font family. The Generic family like “Serif” and “Monospace” have a similar font family and the font-family like “Times New Roman” and “Arial” have a specific font family.
The font-family property is used to set the text of the font family. It is specified by more than one font family by separating with commas. If your browser does not support the first font, it tries the second font, and so on.
Syntax:
font-family: "Times New Roman", Times, serif;
Property Value:
- Arial
- Times New Roman
- Helvetica
- Courier etc.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.serif {
border: 3px solid black;
background-color: pink;
font-family: "Times New Roman", Times, serif;
}
.sans-serif {
border: 3px solid black;
background-color: pink;
font-family: Arial, Helvetica, sans-serif;
}
.monospace {
border: 3px solid black;
background-color: pink;
font-family: "Lucida Console", Courier, monospace;
}
</style>
</head>
<body>
<p class="serif">This is a paragraph in the Times New Roman font.</p>
<p class="sans-serif">This is a paragraph in the Arial font.</p>
<p class="monospace">This is a paragraph in the Lucida Console font.</p>
</body>
</html>
CSS font properties define the font family, style, size, and weight of a text. It is a shorthand for font-family, font-style, font-size, font-weight, font-stretch and font-variant.
