Skip to content
Related Articles
Get the best out of our app
GFG App
Open App
geeksforgeeks
Browser
Continue

Related Articles

CSS direction Property

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

The direction property specifies the direction of the text/writing within any block element. It can have two values rtl(right to left) or ltr( left to right)

Syntax:  

element_selector {
    direction: rtl|ltr|initial|inherit;
} 

Default Value: 

  • ltr 

Property values: 
 

  • rtl: Specifies the direction as right to left.
  • ltr(default): Specifies the direction as left to right which is also the default direction.
  • initial: Sets the property to its default value.
  • inherit: Inherits the property from the parent element.

Example: 
 

html




<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | direction Property
    </title>
    <style>
        html {
            color: green;
        }
          
        .rtl {
            direction: rtl;
        }
          
        .ltr {
            direction: ltr;
        }
    </style>
</head>
  
<body>
  
    <h1>GeeksforGeeks</h1>
  
      
  
<p>This text goes from left to right. This is default.</p>
  
  
    <p class="ltr">This text goes from left to right.</p>
  
  
    <p class="rtl">This text goes from right to left.</p>
  
  
  
</body>
  
</html>


Output: 
 

Supported Browsers: The browsers supported by direction property are listed below: 
 

  • Google Chrome 2.0
  • Edge 12.0
  • Internet Explorer 5.5
  • Firefox 1.0
  • Opera 9.2
  • Apple Safari 1.0

 


My Personal Notes arrow_drop_up
Last Updated : 02 Jun, 2023
Like Article
Save Article
Similar Reads
Related Tutorials