Open In App

Tachyons Typography Text Transform

Improve
Improve
Like Article
Like
Save
Share
Report

Tachyons toolkit is a free and open-source CSS toolkit that is used to create a responsive website. In this article, we will learn how to transform text using the Tachyons toolkit. 

Tachyons Typography Text Transform is used to change the capitalization of the text. 

Syntax:

<element-name class="class-name">
    ...
</element-name>

Tachyons Typography Text Transform Classes:

  • ttu: This class is used to convert any text to uppercase. 
  • ttl: This class is used to convert any text to lowercase.
  • ttc: This class is used to capitalize multiple words. 

Example 1: In the below example, we will convert lowercase text to uppercase text.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
</head>
  
<body>
    <center>
        <h1 class="green">
            GeeksforGeeks
        </h1>
        <h3 class="ttu tracked">
            A computer science portal for geeks
        </h3>
    </center>
</body>
  
</html>


Output:

 

Example2: In the below code we will change the text from uppercase to lowercase.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
</head>
  
<body>
    <center>
        <h1 class="green">
            GeeksforGeeks
        </h1>
        <h3 class="ttl tracked">
            A COMPUTER SCIENCE PORTAL FOR GEEKS
        </h3>
    </center>
</body>
  
</html>


Output:

 

Reference: https://tachyons.io/docs/typography/text-transform/



Last Updated : 20 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads