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


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


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.

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.

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

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.

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.

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

selector { text-decoration: text_decoration_option;}

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;}