The CSS font properties define the font family, boldness, size, and the style of a text. we can change the text size, color, style and more
font-color: it is used to change the color of the text. (standalone attribute)font-family: it is used to change the face of the font.font-size: it is used to increase or decrease the size of the font.font-style: it is used to make the font bold, italic or oblique.font-variant: it creates a small-caps effect.font-weight: it is used to increase or decrease the boldness and lightness of the font.
CSS Font Color
It is used to change the color of the text.
See this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Font Color</title>
<style>
h1 {
color:red;
}
h2 {
color:#11a286;
}
p {
color:rgb(66, 103, 178);
}
</style>
</head>
<body>
<h1>This is heading.</h1>
<h2>This is another heading</h2>
<p>This is a paragraph</p>
</body>
</html>
CSS Font Family
It is used to change the font family of the text.
See this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Font Family</title>
<style>
h1 {
font-family:arial;
}
h2 {
font-family:serif;
}
p {
font-family:monospace;
}
</style>
</head>
<body>
<h1>This is heading.</h1>
<h2>This is another heading</h2>
<p>This is a paragraph</p>
</body>
</html>
CSS Font Size
It is used to change the font size of the text.
See this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Font Size</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
It is used to change the font style of the text.
See this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Font Style</title>
<style>
h1 {
font-style:italic;
}
h2 {
font-style:oblique;
}
p {
font-style:normal;
}
</style>
</head>
<body>
<h1>This is heading.</h1>
<h2>This is another heading</h2>
<p>This is a paragraph</p>
</body>
</html>
CSS Font Variant
It specifies how to set font variant of an element. It may be normal and small-caps.
See this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Font Variant</title>
<style>
h1 {
font-variant:normal;
}
p {
font-variant:small-caps;
}
</style>
</head>
<body>
<h1>This is heading.</h1>
<p>This is a paragraph</p>
</body>
</html>
CSS Font Weight
It 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).
See this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Font Weight</title>
</head>
<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>
