CSS Fonts

Fonts are actually different type faces of the text. They include the font-size, font-family, font-variant, font-weight, font-style and color of the fonts.

font-size

The font-size property defines the size of the font. The size may be defined in px, em units. Size of the fonts can also be defined by the percentage(%) value.

Example

size

font-size:18px;

size

font-size:3em;

size

font-size:200%;

Try </>

Remember that the sizes in em or percentage are more cascadable because they adjust their sizes according to the the different devices i.e. the sizes become smaller or larger according to the devices.

font-weight

font-weight defines the stroke thickness(blackness). The values of font-wight increase from 100 to 900. And as a result the darkness (stroke thickness) increases from 100 to 900.

Example

NORMAL

font-wight:400;
OR
font-wight:normal;

BOLD

font-weight:700;
OR
font-weight:bold;

Try </>

font-style

font-style defines the style of text. It represents normal, italic and oblique text.

Example

size

font-style:normal;

size

font-style:oblique;

size

font-style:italic;

Try </>

When oblique is not available, it selects italic font.

font-family

It represents a list of family names separated by comma. This list also contains generic family at the end.

Example

<style>
div{font-family:family-name,family-name,generic-family;}
div{font-family:papyrus,"Curlz MT",sans;}
</style>

Try </>

Comma separated values are alternative. Alternative means if one font is not available, then the next font will be used. If the next is also not available then the next to it will be used. If none of the fonts is available, then generic family will be used.


generic-family includes serif, sans-serif, cursive, fantasy and monospace.

Example

family

sans

family

sans-serif

family

cursive

family

fantasy

family

monospace

Try </>

family names include many types of fonts. For example, Curlz MT and papyrus, geo sans light etc.

color

This CSS property defines the color of the text. The value may be in rgb or hexadecimal.

Example

<style>
p{color:red;}
p{color:rgb(255,0,0);}
p{color:#ff0000;}
</style>

Try </>

The above three values define the same color i.e. red.



Was this article helpful?

 

Email:

Message: