The font properties are used to control the appearance of the font that you apply to the text in a webpage. With these properties you can specify the size, weight, style etc. of the font.
The FONT property is a shorthand property in which multiple properties of the font category can be written at the same place. The order of values specified in font properties is font-style, font-variant, font-weight, font-size and font-family.
We’ll be covering the following topics in this tutorial:
Css Font-Family
The FONT-FAMILY property allows you to specify the font that you want to apply to the text in a webpage. The value(s) that you can specify to this property can be a generic family (family of fonts) and/or specific font from a family. If there are multiple values, then each value must be separated by comma.
The various generic families are Serif (Times New Roman etc.), Sans-Serif (Arial, MS Tahoma etc.), Cursive (Adobe Poetic a, Corsiva etc.), Fantasy (Critter, Studz etc.) and Monospace (Courier, Courier New etc.).Let us consider an example,
P {Font-Family: "Arial, Verdana, Serif;")On specifying this property with above values will make the text that is part of <p> element to be of Arial Font. If it is not installed on visitor’s computer then it will be displayed in Verdana font. If both are not installed then any font from Serif family will be used. However, if none of them is installed on visitor’s computer then the default font used by the browser will be substituted.
If the font name contains spaces then it is necessary to specify it in inverted commas. For example:
P {Font-Family: "Times New Roman", Arial;} Some more examples include H1 {Font-Family: "monospace;"} body {Font-Family: "Courier, Verdana, Serif;"} h2 {Font-Family: "Cursive fantasy;"}
CSS Font–Style
The FONT -STYLE property allows you to specify the font style of the text in your webpage. The possible values that can be assigned to it are normal (default), italic and oblique. For example:
P{Font–Style :"italic;"}When applied will make the default font to italic.
CSS Font –Size
The FONT -SIZE property is used to specify the size of the font. The values that can be assigned to font-size property may be specified in terms of their absolute size, relative size, length
Value Type Possible Value
Absolute Size xx-small, x-small, small, medium (default), large x-large, xx-large.
Relative Size smaller, larger
Length in (inches), mm (millimeters), cm (centimeters), pt (points), pc (picas), px (pixels), em, ex
Percentage #%
For example:
p {font-size : i6pt;} H1 {font-size: x-small;} BODY {font-size : larger;} H2 {font-style italic; font-size 150%;}
CSS Font-Weight
The FONT-WEIGHT property allows you to specify the weight of the font i.e. how bold the font is. The possible values are normal (default), bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 and 900. For example:
P {Font-Weight: 200 ;} P {Font-Size: 16pt ; Font-Weight : 400 ;}
CSS Font-Variant
The FONT- VARIANT property enables you to display a font in normal or small-caps. A small-caps font is a smaller version of uppercase font. For example:
P {Font-Variant: small-caps;}Example:
<html> <head> <title>working of font attribute</title> <style type = "text/css"> h1 {font-family: batavia} p {font-size: 30; font-style : italic} </style> </head> <body> <h1>working with dhtml</h1> <p>the cascading style sheets (csss) and the dhtml. </p>
The Cascading Style Sheets (CSSs) made the DHTML a powerful tool that is used to develop attractive web pages, which grab the immediate attention from the user. Vie can make changes globally in a web page with the help of DHTML.
</Body>
</Html>
Dinesh Thakur holds an B.C.A, MCDBA, MCSD certifications. Dinesh authors the hugely popular