CSS Font
The CSS font property helps you adjust how text looks on a webpage. With it, you can change text size, color, style, and other aspects. You've already learned how to make text bold or underlined. Now, you’ll also see how to resize your text using percentages.
Here are some key font attributes in CSS:
- Font Color: Changes the color of the text. (This is a separate attribute.)
- Font Family: Changes the typeface of the text.
- Font Size: Adjusts the size of the text.
- Font Style: Makes the text bold, italic, or oblique.
- Font Variant: Creates a small-caps effect.
- Font Weight: Adjusts the thickness or lightness of the text.
CSS Font Color
The font-color property in CSS is actually a separate attribute, even though it might seem like it's part of the font settings. It is used to change the color of the text.
There are three ways to define a color:
- Using a color name
- Using a hexadecimal value
- Using RGB values
Example
<!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 one</h1>
<h2>This is heading two</h2>
<p>This is a paragraph.</p>
</body>
</html>
Output
.png)
CSS Font Family
CSS font families can be divided into two types:
- Generic Family: Includes categories like Serif, Sans-serif, and Monospace.
- Specific Font Family: Specifies exact font names, such as Arial or Times New Roman.
Serif: Serif fonts have small lines or strokes at the ends of characters. Examples include Times New Roman and Georgia.
Sans-serif: Sans-serif fonts do not have these small lines at the ends of characters. Examples include Arial and Verdana.
Example
<!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 uses a sans-serif font.</h1>
<h2>This heading uses a serif font.</h2>
<p>This paragraph uses a monospace font.</p>
</body>
</html>
Output
.png)
CSS Font Size
The CSS font-size property changes the size of the font.
Here are the different values you can use to set the font size:
Example
<!DOCTYPE html>
<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 to 200%.</p>
<p style="font-size: 20px;">This font size is 20 pixels.</p>
</body>
</html>
Output
.png)
CSS Font Style
The CSS font-style property lets you choose the style of the font. You can set it to italic, oblique, or normal.
Example
<!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 in italic font.</h2>
<h3>This heading is in oblique font.</h3>
<h4>This heading is in normal font.</h4>
</body>
</html>
Output
.png)
CSS Font Variant
The CSS font-variant property controls the font style of an element. You can set it to normal or small-caps.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-variant: small-caps;
}
h3 {
font-variant: normal;
}
</style>
</head>
<body>
<h3>This heading is in normal font.</h3>
<p>This paragraph is in small-caps font.</p>
</body>
</html>
Output
.png)
CSS Font Weight
The CSS font-weight property controls how bold or light the text appears. You can set it to values like normal, bold, bolder, lighter, or use numbers ranging from 100 to 900.
Example
<!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
.png)
.png&description=CSS FONT){kind=link}