Home »
CSS
Changing font in CSS
CSS | Border property: Here, we are going to learn about the border property in CSS with examples.
Submitted by Anjali Singh, on October 24, 2019
CSS font properties
Font properties in CSS is used to define the font family, boldness, size, and the style of a text.
Syntax:
Element {
font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
}
font-style property
The font-style property in CSS is used to define the style of font used for the text.
Generally, there are three types:
- Italics
- Oblique
- Normal
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.p1 {
font-style: normal;
}
p.p2 {
font-style: italic;
}
p.p3 {
font-style: oblique;
}
</style>
</head>
<body>
<p class="p1">Hello! Welcome to Include Help.</p>
<p class="p2">Hello! Welcome to Include Help.</p>
<p class="p3">Hello! Welcome to Include Help.</p>
</body>
Output
font-size property
The font-size property is given in %, px, em, or any other valid CSS measurement. Using pixels, you can use the zoom tool to resize the entire page.
Example:
<!DOCTYPE html>
<head>
<style>
h3 {
font-size: 40px;
}
</style>
</head>
<html>
<body>
<h3>Hello! Welcome to include Help.</h3>
</body>
</html>
Output
The text inside <h3> will be 40px in size.
font-family property
This is for defining the family's name.
You can start with the font you want, and end with a generic family if no other fonts are available, the browser picks a similar font in the generic family.
Example:
<!DOCTYPE html>
<head>
<style>
p {
font-weight: bold;
font-size: 20px;
font-family: Arial, sans-serif;
}
</style>
</head>
<html>
<body>
<p>Hello! Welcome to include Help</p>
</body>
</html>
Output
font-variant property
font-variant property in CSS is used to set the variant of the text normal or small-caps.
Example:
<!DOCTYPE html>
<head>
<style>
.element-one {
font-variant: normal;
}
</style>
</head>
<html>
<body>
<p class="element-one">Hello! Welcome to include Help.</p>
</body>
</html>
Output
The Font Shorthand
You can have all your font styles in one element with the font shorthand. Just use the font property, and put your values in the correct order.
Syntax:
element
{
font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
}
Example:
p {
font-weight: bold;
font-size: 20px;
font-family: Arial, sans-serif;
}
However, with the font shorthand it can be condensed as follows,
<!DOCTYPE html>
<head>
<style>
p {
font: bold 20px Arial, sans-serif;
}
</style>
</head>
<html>
<body>
<p>Hello! Welcome to include Help.</p>
</body>
</html>
Output
CSS Tutorial & Examples »