How to use CSS to style Text

CSS files can change default font used for displaying Web page. Below are available Font properties which can be controlled using CSS

font-family
font-size
font-weight
font-style
font-variant
test-transform
color

Define Font type
CSS files can change default font used for displaying Web page.

Syntax
selector { font-family: font name;}

Define Font Size
Font size is another major factor over which a web designer wants to have control.
Controls are available as relative and absolute sizes Relative sizes. Options available are xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, length, percentage, inherit.
Using relative size helps in controlling font sizes in reference to parent font size. This gives a proportionate output on browsers.
Absolute sizes
To have a better control on Font sizes, absolute sizes are used the available options of units are px (pixels), pt (points), pc (picas), mm (millimetres), cm (centimetres), in (inches), em . Font type is defined most frequently in pt and px sizes.

Syntax
selector { font-size: font_size_option;}

Define Font weight
Font weight can be controlled using CSS style. Options available are: bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 , 900, inherit. The numbers i.e. 100 to 900 indicate the desired weight. Higher the number bolder the type face.

Syntax
selector { font-weight: font_weight_option;}

Define Font Style
To make some text differ from running text Font Style option can be used. available options are italic, normal, oblique ,inherit

Syntax
selector { font-style: font_style_option;}

Define Font variant
This another way you distinct text from running text. Options available are: normal, small-caps, inherit.

Syntax
selector { font-variant: font_variant_option;}

Define Text color
This will turn your text in color from black you can use standard colors by names or to be precise use hex code of color.

Syntax
selector { color: color_name/hex_code;}

Define Text decoration options
What if you want an underline, make text blink! Use text decoration. Options available are: underline, overline, line-through, blink, none

Syntax
selector { text-decoration: text_decoration_option;}
Example’s

p {font-family: Arial; font-size: 16pt; font-weight: bold; font-style: italic;}
p {font-family: Arial; color: blue; text-transform: capitalize; text-decoration: underline;}