Font
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. You have already studied how to make text bold or underlined. Here, you will also
know how to resize your font using percentage.
These are some important font attributes:
• CSS Font color: This property is used to change the color of the text. (standalone attribute)
• CSS Font family: This property is used to change the face of the font.
• CSS Font size: This property is used to increase or decrease the size of the font.
• CSS Font style: This property is used to make the font bold, italic or oblique.
• CSS Font variant: This property creates a small-caps effect.
• CSS Font weight: This property is used to increase or decrease the boldness and lightness of the font.
1) CSS Font Color
CSS font color is a standalone attribute in CSS although it seems that it is a part of CSS fonts. It is used to change
the color of the text.
There are three different formats to define a color:
• By a color name
• By hexadecimal value
• By RGB
In the above example, we have defined all these formats.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
h1 { color: red; }
h2 { color: #9000A1; }
p { color:rgb(0, 220, 98); }
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>
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.
CSS font serif
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { font-family: sans-serif; }
h2 { font-family: serif; }
p { font-family: monospace; }
}
</style>
</head>
<body>
<h1>This heading is shown in sans-serif.</h1>
<h2>This heading is shown in serif.</h2>
<p>This paragraph is written in monospace.</p>
</body>
</html>
font size
<html>
<head>
<title>Practice CSS font-size property</title>
</head>
<body>
<p style="font-size:xx-small;"> This font size is extremely small.</p>
<p style="font-size:x-small;"> This font size is extra small</p>
<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:x-large;"> This font size is extra large. </p>
<p style="font-size:xx-large;"> This font size is extremely large. </p>
<p style="font-size:smaller;"> This font size is smaller. </p>
<p style="font-size:larger;"> This font size is larger. </p>
<p style="font-size:200%;"> This font size is set on 200%. </p>
<p style="font-size:20px;"> This font size is 20 pixels. </p>
</body>
</html>
CSS Font Style
CSS Font style property defines what type of font you want to display. It may be italic, oblique, or normal.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h2 { font-style: italic; }
h3 { font-style: oblique; }
h4 { font-style: normal; }
}
</style>
</head>
<body>
<h2>This heading is shown in italic font.</h2>
<h3>This heading is shown in oblique font.</h3>
<h4>This heading is shown in normal font.</h4>
</body>
</html>
