CSS Text

Text color

The color attribute is used to set the color of the text.

Color is most often specified via CSS:

  • Hexadecimal value-such as: #FF0000
  • An RGB value-such as: RGB(255,0,0)
  • The name of the color-e.g. red

See CSS color values ​​to view the complete color values.

The background color of a web page refers to the choice within the main body:

Example

body { color: red ; } h1 { color: #00ff00
 ; } h2 { color: rgb ( 255 , 0 , 0 )
 ; }
For W3C standard CSS: If you define the color attribute, you must also define the background color attribute.

Text alignment

The text arrangement property is used to set the horizontal alignment of the text.

The text can be centered or aligned to the left or right, and justified at both ends.

When text-align is set to “justify”, each line is expanded to equal width, and the left and right margins are aligned (such as magazines and newspapers).

Example

h1 { text-align: center ; } p .date { text-align: right
 ; } p .main { text-align: justify
 ; }

Text decoration

The text-decoration attribute is used to set or delete the decoration of the text.

From a design point of view, the text-decoration attribute is mainly used to remove the underline of the link:

Example

a { text-decoration: none ; }

You can also decorate text like this:

Example

h1 { text-decoration: overline ; } h2 { text-decoration: line-through
 ; } h3 { text-decoration: underline
 ; }
We do not recommend highlighting text that is not a link, as this often confuses users.

Text conversion

The text conversion attribute is used to specify uppercase and lowercase letters in a text.

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

Example

p .uppercase { text-transform: uppercase ; } p .lowercase { text-transform: lowercase
 ; } p .capitalize { text-transform: capitalize
 ; }

Text indent

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

Example

p { text-indent: 50 px ; }

More examples

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

Specify the space between lines
This example demonstrates how to specify the space between lines in a paragraph

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

Increase the white space between words
This example demonstrates how to increase the white space between words in a paragraph.

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

Align the image vertically
This example demonstrates how to set the vertical alignment of the text to the image.

Add text shadow
This example demonstrates how to set text shadow.

All CSS text attributes

Attributes description
color Set text color
direction Set the text direction.
letter-spacing Set character spacing
line-height Set row height
text-align Align the text in the element
text-decoration Add decoration to text
text-indent Indent the first line of text in the element
text-shadow Set text shadow
text-transform Letters in control elements
unicode-bidi Set or return whether the text is overwritten 
vertical-align Set the vertical alignment of the element
white-space Set the handling of whitespace in the element
word-spacing Set word spacing