Search within TutorialsPark

CSS Text Formatting


Use CSS to format text to suit your Style Demands


CSS: Controlling the space between the Letters

It is better to keep your mouth closed and let people think you are a fool than to open it and remove all doubt. - Mark Twain

letter-spacing:

1. CSS enables you to control the spacing between the individual letters("trackling") with CSS property of letter-spacing.

2. Spaces between the letters enhances readability of the text, but too much spacing could hamper the experience.So, strike a good balance accordingly.

3. The CSS property letter-spacing accepts length as values, units can be in " percent " , " pixel " or " em ".However, em is preferred because then the spacing is based on the font-size of text.

4. The value for letter-spacing can be both positive or negative.The value normal overrides all the inherited spacing values.

Example: CSS Text - letter-spacing

Give it a TRY! » Note: Every font comes inbuilt with its own letter-spacing, which is optimum for readability.


CSS Text: Setting the space inbetween words

A person should not be too honest. Straight trees are cut first and honest people are screwed first. -chanakya

word-spacing:

1. You can add or remove spaces in-between words using the CSS property of word-spacing.

2. The value of word-spacing can be both positive or negative.

3. The CSS property word-spacing accepts length as values, units can be in " percent " , " pixel " or " em ".However, em is preferred because then the spacing is based on the font-size of text.

4. The value "normal" removes all inherited word-spacing values.

Example: CSS Text - word-spacing

Give it a TRY! » Note: You must not play with the word-spacing too often as it comes optimised for most fonts.


CSS: Horizontal Text Alignment

Reader, suppose you were an idiot. And suppose you were a member of Congress. But I repeat myself. - Mark Twain

text-align:

1. You can control the horizontal text alignment of the text using CSS property of text-align

2. Text can be aligned towards the left margin , right margin or justifed to both left and right margin just like a newspaper .

3. Value for the CSS property text-align

left : Aligns text blocks towards the left margin

right: Aligns text blocks towards the right margin

center : Places text blocks at the center of the space provided.

inherit : Aligns text blocks towards both the left and right margin

justify : The child element inherits alignment from the parent element

auto : Applies the default alignment, usually towards the left.

Example:CSS Horizontal text-align

Give it a TRY! » Note: Using justify as a value may add or remove spaces in between text.


CSS Text: Vertical Alignment

A person should not be too honest. Straight trees are cut first and honest people are screwed first. -chanakya

vertical-align:

1. The vertical-align enables you to control the level of vertical alignment of a inline element (and not block elements) relative to the element around it.

2. This property is applicable only to inline and table elements only, eg: elements <img> , <em> , <td> , <strong> , <a>

3. The value for vertical-align can be a number specified using percent(%), pixel(px) or em. Or else using following values:

baseline : Places the on the baseline, its the default value

middle: Places the vertical midpoint 0.25em above the baseline of the parent

sub : Aligns the text to proper position of a subscript

super: Aligns the text to proper position of a superscript.

text-top : The top of element is aligned with the top of parent element's font.

text-bottom : The top of element is aligned with the bottom of parent element's font.

top : The imaginary text box of the element is aligned with the top of parent's text box.

bottom : The imaginary text box of the element is aligned with the bottom of the parent element's text box.

inherit :The child element inherits the vertical-align value of the parent element.

Example: CSS Text vertical-align

Give it a TRY! » Note:Very Important. Its applicable to inline elements only