In this section, we will learn what the direction property is and how to use it in CSS.

CSS direction Property Definition and Usage

The CSS `direction` property is used to set the direction of a text content within an element.

Using this property, we can set the direction of a text to left to right or right to left.

CSS direction Property Syntax

direction: ltr|rtl|initial|inherit;

CSS direction Property Value

• ltr: this value stands for Left to Right and, if used, it means the direction of the target text content should be from left to right. This is the default value.
• rtl: this value stands for Right to Left and, if used, it means the direction of the target text content should be from right to left.

Note: the two global values “initial” and “inherit” can also be used for this property.

Example: direction property in CSS

See the Pen direction property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

How Does CSS direction Property Work?

In this example, the direction of the first paragraph is set ltr, which means text should be positioned from Left to Right. And in the second paragraph, the direction is set to rtl, which means text should be positioned from Right to Left.