Fonts
The font property in CSS is used to customise the appearance of text. You can modify the text size, colour, style, and more using the CSS font property.
Fonts play an important role in website designing. The correct size and font help the user to read the content properly and creates a good impact on the user.
The generic font families are as follows:
- Serif fonts There is a small stroke at the edges of each letter
- Sans Serif fonts No strokes attached to the letters
- Monospace fonts All lets of fixed size
- Cursive fonts Having a human-like font
- Fantasy fonts Decorative font
Here are some key font characteristics:
- Font colour in CSS: This attribute is used to alter the text's colour. (separate attribute)
- Font family in CSS: This feature is used to alter the font's appearance.
- Font size in CSS: The font size can be increased or decreased using the CSS Font size attribute.
- Font style in CSS: This attribute is used to make the typeface bold, italic, or oblique in CSS.
- Font variant in CSS: This attribute generates a small-caps effect in CSS fonts.
- Font weight in CSS: The font's boldness and brightness can be increased or decreased using the CSS Font weight attribute.
Example No.1:
<![CDATA[
<html>
<html lang="en-US">
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>
<h1>Knowledge2life</h1>
<p class="p1">Knowledge2life 1.</p>
<p class="p2">Knowledge2life 2.</p>
<p class="p3">Knowledge2life 3.</p>
</body>
</html>]]>
OUTPUT:
Knowledge2life
Knowledge2life 1.
Knowledge2life 2.
Knowledge2life 3.
Example No.2:
<![CDATA[
<html>
<html lang="en-US">
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<h1>Knowledge2life</h1>
<h2>Knowledge2life 2</h2>
<p>Knowledge2life 3.</p>
</body>
</html>
]]>
OUTPUT:
Knowledge2life
Knowledge2life 2
Knowledge2life 3.
