To control the style of texts, the CSS Font property is used. It is used to change the size, color, and style of texts.
Important font attributes:
- CSS Font color: Used to modify the color of the text.
- CSS Font family: Used to modify the face of the font.
- CSS Font size: Used to modify the size of the font.
- CSS Font style: Used to make the font bold, italic, or oblique.
- CSS Font variant: Used to create a small-caps effect.
- CSS Font weight: Used to modify the boldness and lightness of the font.
CSS Font Color:
CSS font color is a standalone attribute that is used to modify the text color. To define a color we can use three different formats:
- By a color name
- By hexadecimal value
- By RGB
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 10
}
h1 { color: crimson; }
h2 { color: #ffa500; }
p { color:rgb(255, 0, 0); }
}
</style>
</head>
<body>
<h1>Hello World!!</h1>
<h2>Hello World!!</h2>
<p>Hello World!!</p>
</body>
</html>
Explanation:
In the above example, we are using different formats to modify the text color.
CSS Font Family:
There are two types of the CSS Font family. These are:
- Generic family: Serif, Sans-serif, and Monospace.
- Font family: Arial, New Times Roman, etc.
- Serif: Small lines are included at the end of characters in Serif fonts. For example, Times New Roman, Georgia, etc.
- Sans-serif: Small lines are not included at the end of characters in Serif fonts. For example, Arial, Verdana, etc.
Example:
<!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">Hello World!!</p>
<p class="sansserif">Hello World!!</p>
</body>
</html>
Explanation:
In the above example, we are using the different generic CSS font families to display text.
CSS Font Size:
To modify the size of the font, the CSS font-size property is used. Possible values for the font size:
| Value | Uses |
| xx-small | It is used to render extremely small text sizes. |
| x-small | It is used to render the extra small text size. |
| small | It is used to render the small text size. |
| medium | It is used to render the medium text size. |
| large | It is used to render the large text size. |
| x-large | It is used to render the extra large text size. |
| xx-large | It is used to render extremely large text sizes. |
| smaller | It is used to render comparatively smaller text sizes. |
| larger | It is used to render comparatively larger text sizes. |
| size in pixels or | It is used to define the size value in percentage or in pixels. |
Example:
<!DOCTYPE html> <html> <body> <p style="font-size:xx-small;">xx-small.</p> <p style="font-size:x-small;">x-small</p> <p style="font-size:small;">small</p> <p style="font-size:medium;">medium</p> <p style="font-size:large;">large</p> <p style="font-size:x-large;">x-large</p> <p style="font-size:xx-large;">xx-large</p> <p style="font-size:smaller;">smaller</p> <p style="font-size:larger;">larger</p> <p style="font-size:20 <p style="font-size:20px;">20 pixels</p> </body> </html>
Explanation:
In the above example, we are using the different values of the font size to display text.
CSS Font Style:
To determine the type of font to display the CSS Font style property is used. It can either be italic, oblique, or normal.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">Hello World!!</p>
<p class="italic">Hello World!!</p>
<p class="oblique">Hello World!!</p>
</body>
</html>
Explanation:
In the above example, we are using different types of font styles to display text.
CSS Font Variant:
To define the way to set a font variant of an element, the CSS font-variant property is used. It can either be normal or small-caps.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">Hello World!!</p>
<p class="small">Hello World!!</p>
</body>
</html>
Explanation:
In the above example, we are using different types of font variants to display text.
CSS Font Weight:
To specify the weight of the font and to define the boldness of the font, the CSS font-weight property is used. It can either be normal, bold, bolder, lighter, or number (from 100 to 900).
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<p class="normal">Hello World!!</p>
<p class="light">Hello World!!</p>
<p class="thick">Hello World!!</p>
<p class="thicker">Hello World!!</p>
</body>
</html>
Explanation:
In the above example, we are using the different weights of font to display text.
