Text transformation:

ஒரு text-யை upper case-ஆகவும் மற்றும் lower case-ஆகவும் மாற்றுவதற்கு Text transform என்கிற property ஆனது பயன்படுத்தப்படுகிறது.
மூன்று வகையான text transformation பண்ண முடியும்.

1.uppercase
2.lowercase
3.capitalize

uppercase:

அனைத்து text-யையும் upper case-ஆக மாற்ற வேண்டுமென்றால் அதற்கு uppercase என்கிற value ஆனது பயன்படுகிறது.

	 
	 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .front-end{

            text-transform: uppercase;

        }

    </style>

</head>

<body>

<h1>text-transform: uppercase; கொடுப்பதற்கு முன்பு,</h1>

<p>html</p>

<p>css</p>

<h1>text-transform: uppercase; கொடுத்த பிறகு,</h1>

<p class="front-end">html</p>

<p class="front-end">css</p>

</body>

</html>

Output:

விளக்கம்:-
front-end என்பது ஒரு class selector ஆகும்.இந்த front-end என்கிற class selector-ன் உள்ளே text-transfer: uppercase; என்று கொடுக்கப்பட்டுள்ளது.அதாவது,இந்த class selector ஆனது எந்தெந்த element-ல் பயன்படுத்தப்படுகிறதோ அந்த element-ன் உள்ளே இருக்கின்ற அனைத்து text-ம் upper case-ஆக மாறிவிடும்.

lowercase

அனைத்து text-யையும் lower case-ஆக மாற்ற வேண்டுமென்றால் அதற்கு uppercase என்கிற value ஆனது பயன்படுகிறது.

	 
	 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .back-end{

            text-transform: lowercase;

        }

    </style>

</head>

<body>

<h1>text-transform: lowercase; கொடுப்பதற்கு முன்பு,</h1>

<p>PHP</p>

<p>JSP</p>

<h1>text-transform: lowercase; கொடுத்த பிறகு,</h1>

<p class="back-end">PHP</p>

<p class="back-end">JSP</p>

</body>

</html>

Output:

capitalize

எல்லா வார்த்தைகளிலும் உள்ள முதல் எழுத்து capital letter ஆக மாற்ற வேண்டுமென்றால் அதற்கு capitalize என்கிற value ஆனது பயன்படுத்தப்படுகிறது.

	 
	 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .database{

            text-transform: capitalize;

        }

    </style>

</head>

<body>

<h1>text-transform: capitalize; கொடுப்பதற்கு முன்பு,</h1>

<p>sql database</p>

<p>mongodb database</p>

<h1>text-transform: capitalize; கொடுத்த பிறகு,</h1>

<p class="database">sql database</p>

<p class="database">mongodb database</p>

</body>

</html>