Css fonts
CSS Font property is used to control the look of texts. By the use of CSS font property you can change the text size, color, style and more
1)CSS Font Family
CSS font family can be divided in two types:
- Generic family: It includes Serif, Sans-serif, and Monospace.
- Font family: It specifies the font family name like Arial, New Times Roman etc.
Serif: Serif fonts include small lines at the end of characters. Example of serif: Times new roman, Georgia etc.
Sans-serif: A sans-serif font doesn’t include the small lines at the end of characters. Example of Sans-serif: Arial, Verdana etc.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h3{font-family: 'Times New Roman', Times, serif;}
p{font-family:'Courier New', Courier, monospace;}
</style>
</head>
<body>
<h3>Yasham Acadamy</h3>
<p>Welcome to Yasham Acadamy</p>
<p >Educational Institute</p>
</body>
</html>2)CSS font-style
To define some specific style for an HTML element the font-style property is used. The font-style property can have a normal, oblique, or italic value.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1{font-style: italic;}
h2{font-style: oblique; }
h3{font-style: normal;}
</style>
</head>
<body>
<h4>Educational Institute</h4>
<h3>Yasham Acadamy</h3>
<h2>Welcome to Yasham Acadamy</h2>
</body>
</html>3) CSS Font Weight
CSS font weight property defines the weight of the font and specify that how bold a font is. The possible values of font weight may be normal, bold, bolder, lighter or number (100, 200….. upto 900).
<!DOCTYPE html>
<html lang="en">
<body>
<p style="font-weight:bold;">This heading is shown in bold font.</p>
<p style="font-weight:bolder;">This heading is shown in bolder font.</p>
<p style="font-weight:lighter;">This heading is shown in lighter font.</p>
<p style="font-weight:100;">This heading is shown in 100 weight.</p>
<p style="font-weight:200;">This heading is shown in 200 weight.</p>
<p style="font-weight:300;">This heading is shown in 300 weight.</p>
<p style="font-weight:400;">This heading is shown in 400 weight.</p>
<p style="font-weight:500;">This heading is shown in 500 weight.</p>
<p style="font-weight:600;">This heading is shown in 600 weight.</p>
</body>
</html>4) CSS Font Size
CSS font size property is used to change the size of the font.
These are the possible values that can be used to set the font size:
| Font Size Value | Description |
| xx-small | used to display the extremely small text size. |
| x-small | used to display the extra small text size. |
| small | used to display small text size. |
| medium | used to display medium text size. |
| large | used to display large text size. |
| x-large | used to display extra large text size. |
| xx-large | used to display extremely large text size. |
| smaller | used to display comparatively smaller text size. |
| larger | used to display comparatively larger text size. |
| size in pixels or % | used to set value in percentage or in pixels. |
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p style="font-size: small;">This font size is Small</p>
<p style="font-size: medium;">This font size is Medium</p>
<p style="font-size: large;">This font size is Large</p>
<p style="font-size: 200%;">This font size is 200%</p>
<p style="font-size: 20px;">This font size is 20px</p>
</body>
</html>5) CSS Font Variant
CSS font variant property specifies how to set font variant of an element. It may be normal and small-caps.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h3{font-variant: normal;}
p{font-variant: small-caps;}
</style>
</head>
<body>
<div>
<h3>This heading is shown in normal font</h3>
<p>This heading is shown in small-cap font</p>
</div>
</body>
</html>