CSS lists are used to organize your list items either in unordered lists or ordered lists. See the example of unordered lists and ordered lists in the below table.
Unordered Lists
Ordered Lists
■ Banana ■ Orange ■ Mango ■ Apple
1. Banana 2. Orange 3. Mango 4. Apple
♡ Banana ♡ Orange ♡ Mango ♡ Apple
i. Banana ii. Orange iii. Mango iv. Apple
CSS Lists (All Properties)
CSS Lists (All Properties)
1. list-style-type
2. list-style-position
3. list-style-image
4. list-style
1. list-style-type
See the below syntax of list-style-type in the Unordered and Ordered list. list-style-tyle: none property is used to remove the predefined default settings of list bullets/numbers.
list-style-position property specifies the position of lists. The lists of bullets/numbers can be outside the list item or inside the list items. See the below example of using list-item-position.
If you want to use your own custom image list items then you can use the list-style-image property. See the source code below for using your own custom image list items.
CSS links indicate that the blue color text has a link that opens another page upon clicking on it. The link text can be styled in different states such as:
link – normal, unvisited link
visited – already visited the link
hover – link on mouse over it
active – a link that is just clicked
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.css-links:link {
color: blue; /*unvisited link*/
}
.css-links:visited {
color: green; /*visited link*/
}
.css-links:hover {
color: red; /*mouse over link*/
}
.css-links:active {
color: orange; /*selected link*/
}
</style>
</head>
<body>
<p><b><a class = "css-links" href="https://www.elsebazaar.com/blog/css-tutorial/" target="_blank">Put your mouse over to check on different link states</a></b>
</body>
</html>
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-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.
