Home >>CSS Tutorial >CSS Font
CSS Font
CSS Font Properties
The CSS font is used to set font related styles and control the look of text present on an HTML. By using CSS font property you can define the text size, color, boldness, style and more.
These are the following font Properties:
- CSS Font style: This property defines how to change font style like, italic, oblique or bold.
- CSS Font variant: It specifies that we can set this property to text is either normal or small-caps font.
- CSS Font color: This property defines how to change or set the font color.
- CSS Font weight: This property allows to set the font weight of the text present on an HTML Page.
- CSS Font family: We can specify a list of font names for the text contained inside an HTML element, using font-family property.
- CSS Font size: This property is used to specify a font size ( increase or decrease) of the text.
1. CSS Font style
This property defines how to change the font style and which type of font you want to display in HTML web page. We can set this property to normal, italic and oblique.
Let's take an example of CSS font style:
<!DOCTYPE html>
<html>
<head>
<style>
h4.normal {
font-style: normal;
}
h4.italic {
font-style: italic;
}
h4.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h4 class="normal"> The text is defined in normal style. </h4>
<h4 class="italic"> The text is defined in italic style. <h4>
<h4 class="oblique"> The text is defined in oblique style.</h4>
</body>
</html>
The text is defined in normal style.
The text is defined in italic style.
The text is defined in oblique style.
2. CSS Font Variant
It specifies whether or not a font is a small-caps font. We can set this property to either normal or small-caps.
However, the original uppercase letters in the text look smaller font size after converted the uppercase letter.
Let's take an example of CSS font variant:
<!DOCTYPE html>
<html>
<head>
<style>
h4.normal {
font-variant: normal;
}
h4.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<h4 class="normal">My name is Phptpoint.</h4>
<h4 class="small"> My name is Phptpoint.</h4>
</body>
</html>
My name is Phptpoint.
My name is Phptpoint.
3. CSS Font Color
The CSS font Color specifies how to change or set the font color and what type of font color you want to display in your HTML web page. This property make the font more attractive and colorful. By using the font color you can highlights the important text or slogans.
Let's take an example of CSS font color:
<!DOCTYPE html>
<html>
<head>
<style>
.txt {
color: purple;
}
.txt1 {
color: red;
}
</style>
</head>
<body>
<h4 class="txt">Hello Phptpoint. </h4>
<h2 class="txt1">Hello Phptpoint. </h2>
</body>
</html>
Hello Phptpoint.
Hello Phptpoint.
4. CSS Font weight
This property allows to set the font weight of the text present on an HTML Page. We can set this property to normal, bold, bolder, lighter, number (100, 200, 300 upto 900).
Let's take an example of CSS Font weight:
<!DOCTYPE html> <html> <body> <p style="font-weight:100;">This font is weight 100.</p> <p style="font-weight:200;">This font is weight 200.</p> <p style="font-weight:300;">This font is weight 300.</p> <p style="font-weight:400;">This font is weight 400.</p> <p style="font-weight:900;">This font is weight 900.</p> <p style="font-weight:lighter;">This font is lighter.</p> <p style="font-weight:bold;">This font is bold.</p> <p style="font-weight:bolder;">This font is bolder.</p> </body> </html>
This font is weight 100.
This font is weight 200.
This font is weight 300.
This font is weight 400.
This font is weight 900.
This font is lighter.
This font is bold.
This font is bolder.
5. CSS Font Family
We can specify a list of font names for the text contained inside an HTML element, using font-family property. By using the CSS font Family you can change the family of font as you need.
CSS font family has two types:
- Font family: The font family defines the font family name like Arial, Calibri, New Times Roman etc.
- Generic family: It includes Sans-serif, Serif and Monospace.
Let's take an example of CSS Font Family:
<!DOCTYPE html>
<html>
<head>
<style>
p.serif {
font-family: "Times New Roman", Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<p class="serif">This paragraph font family is Times New Roman font.</p>
<p class="sansserif"> This paragraph font family is arial font.</.</p>
</body>
</html>
This paragraph font family is Times New Roman font.
This paragraph font family is arial font.
6. CSS Font size
This property is used to specify a font size ( increase or decrease) of the text.We can specify a font size for the text. We can specify size in the form of percentage, px, em.
Ex:-
p { font-size: 50%; }
p { font-size: 16px }
p { font-size: 2em; }
p { font-size: xx-small; }
The default text size in browsers is 16px or 1em.
Let's take an example of CSS Font size in pixels:
<!DOCTYPE html>
<html>
<head>
<style>
p.txt {
font-size: 35px;
}
p.txt1 {
font-size: 25px;
}
</style>
</head>
<body>
<p class="txt">This is paragraph</p>
<p class="txt1">Hello world </p>
</body>
</html>
This is a paragraph
Hello world
Let's take another example of CSS Font size with em:
<!DOCTYPE html>
<html>
<head>
<style>
p.p1 {
font-size: 2.8em;
}
p.p2 {
font-size: 2em;
}
</style>
</head>
<body>
<p class="p1">Hello world</p>
<p class="p2">Hello Phptpoint</p>
</body>
</html>
Hello world
Hello Phptpoint