by Dinesh Thakur Category: Cascading Style Sheets (CSS)

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.

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>





About Dinesh Thakur

Dinesh ThakurDinesh Thakur holds an B.SC (Computer Science), MCSE, MCDBA, CCNA, CCNP, A+, SCJP certifications. Dinesh authors the hugely popular blog. Where he writes how-to guides around Computer fundamental , computer software, Computer programming, and web apps. For any type of query or something that you think is missing, please feel free to Contact us.