Use Of Fonts In CSS

By / February 1, 2022

Watch video presentation for better understanding and subscribe for more;

Watch now!
In this tutorial we will discuss; colors(background-color, text colors), fonts(font-family, font-size, font-weight, font-style, font variant), we will also discuss texts (text-direction, text-indent, text-align, text-shadow, text-shadow) among other styles used in CSS, therefore we will divide this tutorial into three parts. Let’s first start by discussing colors in css.

1. Colors


This is the first part of our tutorial, to make your web page look more attractive to the eye, you need to apply various colors to the text and even to the background to add colors we will have this examples;

a) Inserting Background-color

<p style="background-color: red;">
The paragraph will have a background-color of red.
</p>

You may try it using other various types of html elements like h1, body.

It will produce this;

The paragraph will have a background-color of red.

b) Inserting text color

<h1 style="color: green;">This is a heading, it will appear in green color</h1>

It will produce this;

This is a heading, it will appear in green color

2. Fonts

This is our second part of our tutorial, we will discuss use of fonts in css, there are various types of fonts that are applied in CSS, they include;

  • font-size– It will change the sizes of the fonts. As in this example;
<h1 style="font-size: 14px;">
The heading will appear in the size of 14 pixels
</h1>

It will produce this;

The heading will appear in the size of 14 pixels

  • font-weight -It makes fonts to appear in either bold or light. An example;
<h1 style="font-weight: bold;">
This heading will appear in bold
</h1>

You may apply it using light ad see how the characters appears

It will produce this;

This heading will appear in bold

  • font-family -It will make the text appear in the specified font-family. An example;
<h1 style="font-family: verdana;">
This heading will appear in verdana
</h1>

It will produce this;

This heading will appear in verdana

  • font-style – It makes the fonts to appear in italic, normal or oblique. An example;
<h1 style="font-style: italic;">
The heading will appear in italics
</h1>

It will produce this;

The heading will appear in italics

  • font-variant -It will change the font either to small-caps or normal. An example;
<h1 style="font-variant: small-caps;">
The heading will appear in small caps
</h1>

It will produce this;

The heading will appear in small caps

3. Texts

This marks the third part of our tutorial, here we will discuss various properties applied when writing texts in an html file, they include; text-shadow, text-align, text-indent, text-transform among others, let’s discuss each with appropriate examples;

  • Text-direction -It sets the text to the specified direction. An example;
<h1 style="direction: rtl;">
The heading appears in the direction of right to left
</h1>

It will produce this;

The heading appears in the direction of right to left

  • Text-spacing -It sets spaces between the letters and words, we will have examples to illustrate them;
case 1.
<h4 style="letter-spacing: 5px;">
T h e h e a d i n g w i l l h a v e s p a c e s b e t w e e n l e t t e r s
</h4>

case 2.
<h4 style="word-spacing: 5px;">
The heading will have the spaces between words
</h4>

It will produce this;

case 1.

T h e h e a d i n g w i l l h a v e s p a c e s b e t w e e n l e t t e r s

case 2.

The heading will have the spaces between words

  • Text-alignment -It will align the text in the specified position, either justify, center, right, left. An example;
case 1.
<h1 style="text-align: center;">
The text will be aligned in the center
</h1>

case 2.
<h1 style="text-align: right;">
The text will be aligned in the right
</h1>

case 3.
<h1 style="text-align: left;">
The text will be aligned in the left
</h1>

case 4.
<h1 style="text-align: justify;">
The text will be justified
</h1>

It will produce this;

case 1.

The text will be aligned in the center

case 2.

The text will be aligned in the right

case 3.

The text will be aligned in the left

case 4.

The text will be justified

  • Text-decoration -It allows one to decorate their texts, such as underline, strike-through, blink, overline, line-through. An example;
case 1:
<h1 style="text-decoration: line-through;">
The text will have a line through
</h1>

case 2:
<h1 style="text-decoration: underline;">
The text will be underlined
</h1>

case 3:
<h1 style="text-decoration: blink;">
The text will have a blinking effects
</h1>

case 4:
<h1 style="text-decoration: overline;">
The text will have a overline
</h1>

It will produce this;

case 1:

The text will have a line through

case 2:

The text will be underlined

case 3:

The text will have a blinking effects

case 4:

The text will have a overline

  • Text-transform -Here the texts are written to the specified cases. We may have capitalize, uppercase, lowercase, none. An example;
case 1.
<h1 style="text-transform: lowercase;">
the text will appear in lowercase
</h1>

case 2.
<h1 style="text-transform: uppercase;">
THE TEXT WILL APPEAR IN UPPERCASE
</h1>

case 3.
<h1 style="text-transform: capitalize;">
The Text Will Be Capitalized
</h1>

case 4.
<h1 style="text-transform: none;">
The text will have no text transformations
</h1>

It will produce this;

case 1.

the text will appear in lowercase

case 2.

THE TEXT WILL APPEAR IN UPPERCASE

case 3.

The Text Will Be Capitalized

case 4.

The text will have no text transformations

  • Text-shadow – here text will have shadow of the specified pixels and color. An example;
<h1 style="text-shadow: 2px 3px 4px red;">
The text will have a red shadow
</h1>

It will produce this;

The text will have a red shadow

With that we have ended our tutorial on use of fonts in css, as we continue on our training; hoping to meet you in our next tutorial.