The font attribute in CSS is another very important property used quite often in Web Development. The name itself is quite self explanatory. It is used to manipulate the size, color and the font type of the text. We normally use this property in order to make the content we write appear visually appealing and attractive. Obviously people who have used Word would know what I am talking about. So, the way we manipulate text in Word can be done similarly in CSS too!
So, let’s begin with an example. I have a random paragraph down below.
Now let’s style the paragraph by applying fonts to it
See any difference? I have decreased the font size to 12 pixels and I have applied a font type called Helvetica. This is what I wrote-
font: 12px Helvetica;
As I explained previously, p stands for paragraph. And the content within the curly braces is the action which would be performed on the paragraph.
Let’s formally define the Font property-
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
font style by the name itself specifies the style of the font. It can be either Normal/Italic/Oblique.
font-variant specifies the variant of the font. The value which is normally used is “small-caps”
font-weight is used to define whether the text should be bold light. I will explain in detail a little later.
font-size specifies the size of the font. It can either be in pixels or percentages.
font-family describes a list of fonts. And the browser applies one of them from the list by availability.
The remaining properties are not used quite often and hence of not much significance.
Now, let’s talk about the font-weight property which I promised I would shed some light on it.
The font-weight property is something you want to use if you would like to selectively define the thickness of the characters.
Let’s take the same paragraph which you saw a little while earlier
Now let’s apply the font-weight property to this paragraph and see what happens!!
As you might have noticed, I applied the Bold font type to it. See what I wrote-
It’s as simple as that. Just specify whether you want the text to be light or bold. Apart from this, you can also specify values in case one does not want to use the two categories. The range is from 0 to 900 and you can specify a value anywhere between that. 0 would be the lightest possible type of text you could possibly find and 900 would be the darkest. Let’s see how would it appear to be
I have set the font-weight to zero for the paragraph above.
This is supposed to be the lightest possible type you get. Now let’s do the opposite and apply 900 to the font-weight property.
So, you can see It has again turned Bold and this is the darkest you could possibly get. And as you would have probably guessed by now, values between 0 and 900 would have an intermediate type.
And that’s it for today. See you later!!