CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Text

CSS text properties are used to manipulate text.


Text Color

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

Run code

Colors in CSS most often specified by the following methods:

  • color name - like "red"
  • HEX value - like "#4285f4"
  • RGB value - like "rgb(19, 207, 19)"

Look at CSS Color Values for a complete list of possible color values.


Text Alignment

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

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

Left Aligned text

Centered text

Right Aligned text

Run code

When the text-align property is set to justify, each line is stretched so that every line has equal width, and the left and right margins are straight (like in newspapers):

Run code

Text Overflow

The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or display a custom string.

Run code

Both of the following properties are required for text-overflow:


Text Decoration

The text-decoration property specifies the decoration added to text, such as underline, overline, etc.

Run code

Tip: The text-decoration: none; is frequently used with Hyperlinks to remove default underline.



Text Transformation

The text-transform property specifies how to capitalize text.

It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized:

This text is LOWERCASE

This text is uppercase

this text is capitalized

Run code

Note how text-transform: capitalize; only changes the first letter of each word, leaving the case of any other letters unaffected.


Text Indentation

The text-indent property is used to specify the indentation (empty space) of the first line of a text.

Run code

Letter Spacing

The letter-spacing property is used to specify the space between the characters in a text.

The following example demonstrates how to increase or decrease the space between characters:

Run code

Line Height

The line-height property is used to specify the space between lines of text.

Run code

Text Direction

The direction property is used to change the direction of text.

Use rtl for languages written from right to left (like Hebrew or Arabic), and ltr for those written from left to right (like English and most other languages):

Run code

Word Spacing

The word-spacing property is used to specify the space between the words in a text.

The following example demonstrates how to increase or decrease the space between words:

Run code

Text Shadow

The text-shadow property adds shadow to text.

In the following example (3px) is the position of the horizontal shadow and (2px) is the position of the vertical shadow:

Run code

White space

The white-space property determines how whitespace inside an element is handled.

Run code

CSS Text properties

Property Description
color Sets the color of text
direction Specifies the text direction/writing direction
letter-spacing Increases or decreases the space between characters in a text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-decoration Specifies the decoration added to text, such as underline, overline, etc
text-indent Specifies the indentation of the first line in a text-block
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
text-overflow Specifies how overflowed content that is not displayed should be signaled to the user
unicode-bidi Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
vertical-align Sets the vertical alignment of an inline-element
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a text