CSS 02

CSS Box Model

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model.

CSS Text

Shows how to manipulate text using CSS properties

We can set following text properties of an element.

Text Color

The color property is used to set the color of a text.
Look at CSS Color Values for a complete list of possible color values.

Text Color and Background Color

In this example, we define both the background-color property and the color property:

Text Alignment

The text-align property is used to align the text of a document.

A text can be left or right aligned, centered, or justified.

Text Direction

The direction property is used to set the text direction.

The direction and Unicode-bidi properties can be used to change the text direction of an element

Vertical Alignment

The vertical-align property sets the vertical alignment of an element.

This example demonstrates how to set the vertical alignment of an image in a text.

Text Decoration

The text-decoration property is used to underline, overline, and strikethrough text.

The following example demonstrates how to decorate a text. Possible values are none, underline, overline, line-through, blink.

CSS Text Transformation

The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.

CSS Text Spacing

The letter-spacing property is used to add or subtract space between the letters that make up a word.
The word-spacing property is used to add or subtract space between the words of a sentence.
The text-indent property is used to indent the text of a paragraph.
The white-space property is used to control the flow and formatting of text.