Fonts in css

In this aticle we are going to learn about fonts in css, how can we change font style, font weight, font size and font family in web pages using Cascading Style Sheets.

We learnt about css in general learning what css can do in web pages and we are going to learn about fonts in css, how can we change font style, font weight, font size and font family in web pages using Cascading Style Sheets.

Fonts

Fonts gives how text in html looks, the font can be large, small, italic, bold, strong, emphasis, underlined and can also be arial. So, all this tells us that we can give our text better look to our websites users.

Font type

Font style help us to format text to be normal, italic, inherit, initial, oblique, and more. So, let us give a text italic font style using css, copy and paste below code.

<div style="font-style: italic;">This is italic text.</div>

So, we should have the following results.

This is italic text.

Font weight

We can use font weight instead of using font style. Let us give a text bold font weight, copy and paste below code.

<div style="font-weight: bold;">This is bold text.</div>

So, we should have the following results.

This is bold text.

Font size

Font size help us to give text a specific size so that the text can be clearly seen by web page viewers if formated to be large.

Let us create a text with 20px font size applied, copy and paste below code.

<div style="font-size: 20px;">This is 20px text size.</div>

So, we should have the following results.

This is 20px text size.

We can also create the text with another size of our choice.

Let us create a text with 50px font size applied, copy and paste below code.

<div style="font-size: 50px;">This is 50px text size.</div>

So, we should have the following results.

This is 50px text size.

Font family

Font families are used to set font types, the developer can choose to use a font like monospace, serif and more according to the design that is good to him.

So, we are going to give our text font family of our choice and we will use cursive font family, copy and paste below code.

<div style="font-family: cursive;">This is a cursive font family text.</div>

So, we should have the following results.

This is a cursive font family text.

We see that the font is different from what we see on other texts, this means the font used is also different to that used on other texts.

Let us give our text monospace font family, copy and paste below code.

<div style="font-family: monospace;">This is a monospace font family text.</div>

So, we should have the following results.

This is a monospace font family text.

Conclusion

In this article we learnt about fonts in css, how can we change font style, font weight, font size and font family in web pages using Cascading Style Sheets. with examples.