CSS-Font Property

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.

Capture

Now let’s style the paragraph by applying fonts to it

Capture

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-

p{

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;

where

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.

For Example

Let’s take the same paragraph which you saw a little while earlierCapture

Now let’s apply the font-weight property to this paragraph and see what happens!!

Capture.PNG

As you might have noticed, I applied the Bold font type to it. See what I wrote-

p{
font-weight:bold;

}

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

Capture

I have set the font-weight to zero for the paragraph above.

p{
font-weight:0;

}

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.

Capture

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!!

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s