CSS 03
- chathu hewage
- Feb 20, 2021
- 2 min read
CSS Fonts
It is also important to Choosing the right font and style is very crucial for the readability of text on a page.
The important font properties are:
font-family
font-style
font-weight
font-size
font-variant.
Font Family
we use the font-family property to specify the font of a text and used to change the face of the font.
we can use five generic font families.
Serif
Sans-serif
Monospace
Cursive
Fantasy
Difference Between Serif and Sans-serif Fonts
Example
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Brush Script MT, Lucida Handwriting, Cursive;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>
<p class="p1">Times New Roman font.</p>
<p class="p2"> Arial font.</p>
<p class="p3"> Lucida Console font.</p>
</body>
</html>
Font Style
We can use font-style property is used to set the font face style for the text content of an element.
This property has three values:
normal
italic
oblique
<!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"> normal style.</p>
<p class="italic"> italic style.</p>
<p class="oblique">oblique style.</p>
</body>
</html>
Font Weight
The font-weight property specifies the weight of a font.
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
</body>
</html>
Font Variant
The font-variant property allows the text to be displayed in a special small-caps variation.
<!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>
Font Size
The font-size property sets the size of the text.
we should always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.
<html>
<head>
<style>
h1 {
font-size: 40px;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is a paragraph.</p>
</body>
</html>
References:
Tutorial Created by Dayani Kaushalya
Comments