CSS Font Properties

In today’s post you will learn how to style font using css. Some of the css font properties are: 1.   font-family 2.   font-style 3.   font-variant 4.   font-weight 5.   font-size 6.   font font-family property is usedto display text in a selected font. Font family names is of two types:
Family name: The name of font family like Arial, Georgia. Generic family: The name of generic family name like: serif – fonts have serifs (small lines) at the end of their characters e.g. Times New Roman, Georgia sans-serif– fonts don’t have serifs at the end of their characters e.g. Arial, Verdana monospace – all characters of this type of fonts have same width e.g. Courier New, Lucida Console cursive –  fonts imitate handwriting e.g. Comic Sans MS fantasy – fonts are decorative fonts e.g. Impact Text will be displayed in first mentioned font if it is installed on your computer. If it is not installed then text will be displayed in second mentioned font and so on. Last option must be of generic family name because browser will display any font of that family if no other previously mentioned fonts are installed on your computer. Example h1{font-family : “Times New Roman”, Georgia, serif;} Note: If font name is more than one word then it must be quoted. font-style is used to display text in italic or oblique. Its values are normal, italic and oblique. Example p{font-style : italic;} font-variant property is used to display text in small caps font. Its values are normal and small-caps. Example h2{font-variant : small-caps;} font-weight property is used to set how bold the text appears. Its values are normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 and 900 Example p{font-weight : bold;} font-size property is used to set size of a text. Its values are xx-small, x-small, small, smaller, medium, large, larger, x-large, xx-large. You can also specify size in pixels, em (1em=16px) and percentage. Example div{font-size : larger;} font property is shorthand property in which you can specify all font properties together.  Its order is font-style, font-variant, font-weight, font-size and font family. Example p{font : italic, 1em, Arial, sans-serif; } 
Example I have created a web page in which I have used font properties.To view it click here