Fonts

Font control is the most popular uses of stylesheet. The set of properties is used for controlling fonts.

Font-Family

 This property is used to change the face of a font.

font-family
Syntax: font-family: value;
Values: font name or generic font family name separated by commas
Default: depends on the browser
Applies to: all element
Inherits: yes

Generic font families
serif: Time, Times New Roman, Georges, Lucius.
sans-serif: Verdana, Arial, Arial Black, Trebuchet MS.
monospace: Courier, courier New, Andale Mono.
cursive: Apple Chancery, Comic Sans, Snell.
fantasy: Impact, Stencil, Mojo.

Example
body{font-family: Arial;}
p{font-family: courier, monospace;}
Font-Style

This property is used to make a font italic or oblique.

font-style
Syntax: font-style: value;
Values: normal| italic| oblique
Default: normal
Applies to : all element
Inherits: yes

Example
font{font-style: oblique;}
font{font-style: italic;}
Font-Size

This property is used to increases or decrease the size of a font.

font-size
Syntax: font-size: value;
Values: length unit|percentage|small|medium|large|xx-small|x-small|xx-large|x-large|smaller|larger
Default: medium
Applies to: all element
Inherits: yes

Example
p {font-size: 12px;}
body{font-size: small;}
Font-Weight

This property is used to increase to decrease how bold or light a font appears.

font-weight
Syntax: font-weight: value;
Values: normal|bold|bolder|lighter|100|200|300|400|500|600|700|800
Default: normal
Applies to: all element
Inherits: yes

Example
h1 {font-weight: bold;}
p {font-weight: 100;}

Font-Variant

This property is used to create a small caps effect.

font-variant
Syntax: font-variant: value;
values: normal | small-caps
Default: normal
Applies to: all element
Inherits: yes

Example
h1 {font-variant: small-caps;}
Font

The font property is used as shorthand to specify a number of other font properties.

font
Syntax:
font: value;
Values: font-style font-weight font-variant font-stretch font-size line-height font-family | caption | icon | menu | message-box | small-caption | status-box
Default: depends on default values for each property
Applies to: all element
Inherits: yes

Example
h3 {font: oblique bold small-caps 1.4em verdant, sans-serif;}
h2 {font: bold 1.43em serif;}

Leave a Reply