CSS Text Format

Text Color

The Color property is used to set the color of the text.

Colors are most often specified by CSS:

• Hexadecimal values-such as "#ff0000"
• An RGB value-"RGB (255,0,0)"
• Name of the color-such as "Red"

See CSS color values for full color values.

The background color of a Web page refers to the selection within the body:

Instance body {Color:blue;}
h1 {color: #00ff00;}
H2 {Color:rgb (255,0,0);}
Try it»

For the standard CSS: If you define a color attribute, you must also define the background color property.

How text is aligned

Text arrangement properties are used to set the horizontal alignment of text.

Text can be centered or aligned to the left or right, justified.

When Text-align is set to "justify", each line is expanded to equal width, left, and right margin are aligned (such as magazines and newspapers).

instance h1 {Text-align:center;}
p.date {text-align:right;}
P.main {text-align:justify;}
Try it»

Text decoration

The Text-decoration property is used to set or remove decorations for text.

From a design point of view, the Text-decoration property is primarily used to remove the underline of a link:

Instance a {Text-decoration:none;}
Try it»

You can also decorate text like this:

instance h1 {Text-decoration:overline;}
h2 {Text-decoration:line-through;}
h3 {Text-decoration:underline;}
Try it»

We do not recommend highlighting text that is not linked, as this is often confusing for users.

Text conversion

Text conversion properties are used to specify uppercase and lowercase letters in a text.

Can be used to turn all words into uppercase or lowercase letters, or capitalize the first letter of each word.

Instance p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Try it»

Text indent

The text indent property is used to specify the indentation of the first line of text.

Instance p {text-indent:50px;}
Try it»

More examples

Specify the space between characters
This example demonstrates how to increase or decrease the space between characters.

Specify the space between rows and lines
This example shows how to specify the space between rows in a paragraph

Set the text orientation of an element
This example shows how to change the text direction of an element.

Increase the white space between words
This example shows how to increase the amount of space between words in a paragraph.

Disable text wrapping within an element
This example demonstrates how to disable text wrapping within an element.

Vertically align an image
This example shows how to set the vertical alignment of the text image.

Add Text Shadow
This example shows how to set a text shadow.

All CSS Text properties.

Properties	Description
Color	Set Text color
Direction	Sets the text orientation.
Letter-spacing	Set character spacing
Line-height	Set row height
Text-align	Aligning the text in an element
Text-decoration	Add adornments to Text
Text-indent	Indent the first line of text in an element
Text-shadow	Set Text Shadow
Text-transform	Control the letters in an element
Unicode-bidi
Vertical-align	To set the vertical alignment of an element
White-space	Set how whitespace is handled in an element
Word-spacing	Set word spacing

CSS Text Format