CSS Font

by

To control the style of texts, the CSS Font property is used. It is used to change the size, color, and style of texts.

Important font attributes:

  • CSS Font color: Used to modify the color of the text.
  • CSS Font family: Used to modify the face of the font.
  • CSS Font size: Used to modify the size of the font.
  • CSS Font style: Used to make the font bold, italic, or oblique.
  • CSS Font variant: Used to create a small-caps effect.
  • CSS Font weight: Used to modify the boldness and lightness of the font.

CSS Font Color:

CSS font color is a standalone attribute that is used to modify the text color. To define a color we can use three different formats:

  • By a color name
  • By hexadecimal value
  • By RGB

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { color: crimson; }
h2 { color: #ffa500; }
p { color:rgb(255, 0, 0); }
}
</style>
</head>
<body>
<h1>Hello World!!</h1>
<h2>Hello World!!</h2>
<p>Hello World!!</p>
</body>
</html>

Explanation:

In the above example, we are using different formats to modify the text color.

CSS Font Family:

There are two types of the CSS Font family. These are:

  • Generic family: Serif, Sans-serif, and Monospace.
  • Font family: Arial, New Times Roman, etc.
  • Serif: Small lines are included at the end of characters in Serif fonts. For example, Times New Roman, Georgia, etc.
  • Sans-serif: Small lines are not included at the end of characters in Serif fonts. For example, Arial, Verdana, etc.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.serif {
font-family: "Times New Roman", Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<p class="serif">Hello World!!</p>
<p class="sansserif">Hello World!!</p>
</body>
</html>

Explanation:

In the above example, we are using the different generic CSS font families to display text.

CSS Font Size:

To modify the size of the font, the CSS font-size property is used. Possible values for the font size:

Value Uses
xx-small It is used to render extremely small text sizes.
x-small It is used to render the extra small text size.
small It is used to render the small text size.
medium It is used to render the medium text size.
large It is used to render the large text size.
x-large It is used to render the extra large text size.
xx-large It is used to render extremely large text sizes.
smaller It is used to render comparatively smaller text sizes.
larger It is used to render comparatively larger text sizes.
size in pixels or It is used to define the size value in percentage or in pixels.

 

Example:

<!DOCTYPE html>
<html>
<body>
<p style="font-size:xx-small;">xx-small.</p>
<p style="font-size:x-small;">x-small</p>
<p style="font-size:small;">small</p>
<p style="font-size:medium;">medium</p>
<p style="font-size:large;">large</p>
<p style="font-size:x-large;">x-large</p>
<p style="font-size:xx-large;">xx-large</p>
<p style="font-size:smaller;">smaller</p>
<p style="font-size:larger;">larger</p>
<p style="font-size:200%;">200%</p>
<p style="font-size:20px;">20 pixels</p>
</body>
</html>

Explanation:

In the above example, we are using the different values of the font size to display text.

CSS Font Style:

To determine the type of font to display the CSS Font style property is used. It can either be italic, oblique, or normal.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">Hello World!!</p>
<p class="italic">Hello World!!</p>
<p class="oblique">Hello World!!</p>
</body>
</html>

Explanation:

In the above example, we are using different types of font styles to display text.

CSS Font Variant:

To define the way to set a font variant of an element, the CSS font-variant property is used. It can either be normal or small-caps.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">Hello World!!</p>
<p class="small">Hello World!!</p>
</body>
</html>

Explanation:

In the above example, we are using different types of font variants to display text.

CSS Font Weight:

To specify the weight of the font and to define the boldness of the font, the CSS font-weight property is used. It can either be normal, bold, bolder, lighter, or number (from 100 to 900).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<p class="normal">Hello World!!</p>
<p class="light">Hello World!!</p>
<p class="thick">Hello World!!</p>
<p class="thicker">Hello World!!</p>
</body>
</html>

Explanation:

In the above example, we are using the different weights of font to display text.