The CSS font property is employed to manage the appearance of text content. By utilizing the CSS font property, you have the ability to adjust characteristics such as text size, color, style, and additional attributes. In previous lessons, you learned how to apply styles like bold or underlined to text. In this section, you will explore how to adjust the font size using percentages.
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 an independent property within CSS, even though it may appear to be associated with CSS typography. Its purpose is to modify 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 previous example, we have specified 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>
Output:
This is heading 1
This is heading 2
This is a paragraph.
2) CSS Font Family
CSS font family can be categorized into two main groups:
- Standard family: This category comprises Serif, Sans-serif, and Monospace fonts.
- Specific family: This type refers to the explicit font family names such as Arial, Times New Roman, and others.
Serif fonts are characterized by the presence of small lines at the ends of characters. Examples of serif fonts include Times New Roman, Georgia, and others.
Sans-serif fonts are characterized by the absence of small lines at the ends of characters. Examples of sans-serif fonts include Arial, Verdana, and others.
<!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>
Output:
This heading is shown in sans-serif.
This heading is shown in serif.
This paragraph is written in monospace.
3) CSS Font Size
The CSS font size attribute is utilized to adjust the font's size.
The following options represent the available choices for defining 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. |
<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>
Output:
This font size is extremely small.
This font size is extra small
This font size is small
This font size is medium.
This font size is large.
This font size is extra large.
This font size is extremely large.
This font size is smaller.
This font size is larger.
This font size is set on 200%.
This font size is 20 pixels.
4) CSS Font Style
The CSS font-style property determines the desired font appearance, which can 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>
Output:
This heading is shown in italic font.
This heading is shown in oblique font.
This heading is shown in normal font.
5) CSS Font Variant
The CSS font variant property determines how the font variant should be set for an element, which can include options like normal or small-caps.
<!DOCTYPE html>
<html>
<head>
<style>
p { font-variant: small-caps; }
h3 { font-variant: normal; }
</style>
</head>
<body>
<h3>This heading is shown in normal font.</h3>
<p>This paragraph is shown in small font.</p>
</body>
</html>
Output:
This heading is shown in normal font.
This paragraph is shown in small font.
6) CSS Font Weight
The CSS font weight property determines the thickness of the font, indicating the level of boldness. It can be set to various values such as normal, bold, bolder, lighter, or a numerical value ranging from 100 to 900.
<!DOCTYPE html>
<html>
<body>
<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:lighter;">This font is lighter.</p>
<p style="font-weight:100;">This font is 100 weight.</p>
<p style="font-weight:200;">This font is 200 weight.</p>
<p style="font-weight:300;">This font is 300 weight.</p>
<p style="font-weight:400;">This font is 400 weight.</p>
<p style="font-weight:500;">This font is 500 weight.</p>
<p style="font-weight:600;">This font is 600 weight.</p>
<p style="font-weight:700;">This font is 700 weight.</p>
<p style="font-weight:800;">This font is 800 weight.</p>
<p style="font-weight:900;">This font is 900 weight.</p>
</body>
</html>
Output:
This font is bold.
This font is bolder.
This font is lighter.
This font is 100 weight.
This font is 200 weight.
This font is 300 weight.
This font is 400 weight.
This font is 500 weight.
This font is 600 weight.
This font is 700 weight.
This font is 800 weight.
This font is 900 weight.