CSS Fonts
CSS Fonts are a crucial element of web design since they enable designers to personalize the style and look of text on websites.
The following are the various CSS font properties:
Font size
The font size property determines the text size. It can be defined in a number of units, including pixels (px), ems (em), and percentages (%).
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Fonts
</title>
</head>
<body>
<h1 class="heading"> This is a heading </h1>
<p class="para1"> This is a paragraph. </p>
<p class="para2"> This is a paragraph. </p>
</body>
</html>
CSS
.heading
{
font-size: 30px;
}
.para1
{
font-size: 20px;
}
.para2
{
font-size: 20px;
}
Output
Font Style
The font style property sets the style of the font.
There are three types of font styles:
- normal
- italic
- oblique
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Fonts
</title>
</head>
<body>
<p class="para1"> This is a normal paragraph. </p>
<p class="para2"> This is a italic style paragraph. </p>
<p class="para3"> This is a oblique style paragraph. </p>
</body>
</html>
CSS
para1
{
font-style: normal;
}
.para2
{
font-style: italic;
}
.para3
{
font-style: oblique;
}
Output
Font Family
The font-family property determines the font or group of fonts for text content.
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Fonts
</title>
</head>
<body>
<h1 class="heading"> This is a heading. </h1>
<p class="para"> This is a paragraph. </p>
</body>
</html>
CSS
.heading1 {
font-family: 'Times New Roman', Times, serif;
}
.para1 {
font-family: Arial, Helvetica, sans-serif;
}Output
