Text Transformation

Text Transformation అంటే ఏమిటి?

Text Transformation అంటే HTML text ను మార్చకుండా, browser లో అది కనిపించే విధానాన్ని uppercase, lowercase లేదా title case గా మార్చడం. దీనికి CSS లో text-transform property ఉపయోగిస్తాం.

text-transform ఎందుకు ఉపయోగిస్తాం?

Headings, navigation links, buttons మరియు labels లో text ఒకే విధంగా కనిపించడానికి ఈ property ఉపయోగపడుతుంది. ఇది HTML source లో ఉన్న అసలు text ను మార్చదు; browser లో కనిపించే రూపాన్ని మాత్రమే మార్చుతుంది.

ప్రధాన values

none – text ను ఎలాంటి transformation లేకుండా చూపిస్తుంది.
uppercase – అన్ని అక్షరాలను పెద్ద అక్షరాలుగా చూపిస్తుంది.
lowercase – అన్ని అక్షరాలను చిన్న అక్షరాలుగా చూపిస్తుంది.
capitalize – ప్రతి పదం మొదటి అక్షరాన్ని పెద్ద అక్షరంగా చూపిస్తుంది.

Syntax

selector {
  text-transform: value;
}

ఉదాహరణకు, text-transform: uppercase; అని రాస్తే ఆ element లోని text browser లో పెద్ద అక్షరాలతో కనిపిస్తుంది.

గమనించాల్సిన విషయం

text-transform చూపించే text ను మాత్రమే మార్చుతుంది. ఉదాహరణకు HTML లో hello world ఉన్నా, CSS ద్వారా అది HELLO WORLD గా కనిపించవచ్చు. కానీ HTML source లో text ఇప్పటికీ hello world గానే ఉంటుంది.

Simple Explanation

text-transform property తో text యొక్క letter case ను మార్చవచ్చు.

uppercase అంటే HELLO
lowercase అంటే hello
capitalize అంటే Hello World
none అంటే text అసలు రూపంలోనే కనిపిస్తుంది

CSS rule ను సరైన selector తో element కు apply చేయాలి.

Real-Life Example

ఒక website లో navigation links HTML లో home, about us వంటి చిన్న అక్షరాలతో ఉండవచ్చు. వాటిని HTML text మార్చకుండా browser లో HOME, ABOUT US గా చూపించడానికి text-transform: uppercase; ఉపయోగించవచ్చు. Product names లేదా article titles లో ప్రతి పదం మొదటి అక్షరం పెద్దగా కనిపించడానికి capitalize ఉపయోగించవచ్చు.

Code Examples

text-transform తో Text Case మార్చడం

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Text Transformation</title>
  <style>
    .page-title {
      text-transform: uppercase;
      color: navy;
    }

    .description {
      text-transform: lowercase;
    }

    .menu-link {
      text-transform: capitalize;
    }
  </style>
</head>
<body>
  <h1 class="page-title">welcome to our site</h1>
  <p class="description">THIS TEXT WILL APPEAR IN LOWERCASE.</p>
  <p class="menu-link">contact us</p>
</body>
</html>

ఈ ఉదాహరణలో మూడు elements కు మూడు వేర్వేరు text-transform values ఇచ్చాం. Heading మొత్తం uppercase గా, description మొత్తం lowercase గా, menu text ప్రతి పదం మొదటి అక్షరం uppercase గా కనిపిస్తుంది.

HTML లోని అసలు text ను మార్చాల్సిన అవసరం లేకుండా presentation ను CSS నియంత్రిస్తుంది.

The heading appears as WELCOME TO OUR SITE in navy. The paragraph appears as this text will appear in lowercase. The final paragraph appears as Contact Us.

Line-by-Line Explanation

.page-title {
ఈ selector, page-title class ఉన్న element ను ఎంచుకుంటుంది. అందువల్ల ఈ rule ఆ heading కు apply అవుతుంది.

text-transform: uppercase;
Heading text ను browser లో అన్ని పెద్ద అక్షరాలుగా చూపిస్తుంది. HTML లో text చిన్న అక్షరాలతో ఉన్నా display లో uppercase గా కనిపిస్తుంది.

color: navy;
ఇది heading రంగును navy గా మార్చుతుంది. ఇది text transformation కాదు; output ను స్పష్టంగా చూడటానికి ఇచ్చిన అదనపు style.

.description {
description class ఉన్న paragraph ను ఎంచుకుంటుంది.

text-transform: lowercase;
ఈ paragraph లోని అన్ని అక్షరాలను browser లో lowercase గా చూపిస్తుంది.

.menu-link {
menu-link class ఉన్న paragraph ను ఎంచుకుంటుంది.

text-transform: capitalize;
ప్రతి పదం మొదటి అక్షరాన్ని పెద్ద అక్షరంగా చూపిస్తుంది. ఉదాహరణకు contact us, Contact Us గా కనిపిస్తుంది.

<h1 class=”page-title”>welcome to our site</h1>
ఈ heading కు page-title class ఉంది. అందువల్ల .page-title rule apply అవుతుంది మరియు text WELCOME TO OUR SITE గా కనిపిస్తుంది.

<p class=”description”>THIS TEXT WILL APPEAR IN LOWERCASE.</p>
ఈ paragraph కు description class ఉంది. CSS వల్ల పెద్ద అక్షరాలతో ఉన్న source text lowercase గా కనిపిస్తుంది.

<p class=”menu-link”>contact us</p>
ఈ paragraph కు menu-link class ఉంది. CSS వల్ల ఇది Contact Us గా కనిపిస్తుంది.

Try It

Try this CSS code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try Text Transformation</title>
  <style>
    h1 {
      text-transform: uppercase;
    }

    p {
      text-transform: capitalize;
    }
  </style>
</head>
<body>
  <h1>learn css today</h1>
  <p>practice makes progress</p>
</body>
</html>

Try It Yourself »

Practice

Practice: ముందుగా ఉన్న practice_code ను run చేయండి. తరువాత heading ను ప్రతి పదం మొదటి అక్షరం పెద్దగా కనిపించేలా, note ను మొత్తం చిన్న అక్షరాలుగా కనిపించేలా మార్చండి.

Hint: heading కోసం text-transform: capitalize; మరియు note కోసం text-transform: lowercase; ఉపయోగించండి.

Common Mistakes

Property ను text-transform: upper; అని రాయడం.
సరైన value uppercase. పూర్తి declaration text-transform: uppercase; గా రాయాలి.

text-transform: capitalized; అని రాయడం.
సరైన CSS value capitalize, చివరలో d ఉండదు.

HTML text source కూడా మారిపోతుందని అనుకోవడం.
text-transform browser display ను మాత్రమే మారుస్తుంది. HTML లోని అసలు text మారదు.

తప్పు selector ఉపయోగించడం వల్ల transformation కనిపించకపోవడం.
HTML class మరియు CSS class selector ఒకేలా ఉన్నాయో చూడండి. ఉదాహరణకు class="heading" కోసం CSS లో .heading రాయాలి.

Declaration చివర semicolon మర్చిపోవడం, ముఖ్యంగా అదే rule లో మరిన్ని declarations ఉన్నప్పుడు.
ప్రతి CSS declaration చివర ; పెట్టండి: text-transform: uppercase;.

Interview Questions

text-transform property ఏం చేస్తుంది?

Answer: ఇది text ను browser లో uppercase, lowercase లేదా capitalize రూపంలో చూపిస్తుంది. HTML source text ను మార్చదు.

uppercase మరియు lowercase మధ్య తేడా ఏమిటి?

Answer: uppercase అన్ని అక్షరాలను పెద్ద అక్షరాలుగా చూపిస్తుంది. lowercase అన్ని అక్షరాలను చిన్న అక్షరాలుగా చూపిస్తుంది.

capitalize value ఎలా పనిచేస్తుంది?

Answer: ప్రతి పదం మొదటి అక్షరాన్ని పెద్ద అక్షరంగా చూపిస్తుంది. ఉదాహరణకు hello world, Hello World గా కనిపిస్తుంది.

text-transform: none; యొక్క ఉపయోగం ఏమిటి?

Answer: Text పై transformation లేకుండా దాని సాధారణ రూపంలో చూపించడానికి none ఉపయోగిస్తాం.

Exam Questions

Text ను అన్ని పెద్ద అక్షరాలుగా చూపించడానికి ఏ CSS declaration ఉపయోగిస్తారు?

Answer:

text-transform: uppercase;

ప్రతి పదం మొదటి అక్షరాన్ని పెద్దగా చూపించే value ఏది?

Answer:

capitalize

క్రింది CSS లో ఖాళీని పూరించండి: p { text-transform: ______; } — paragraph ను lowercase గా చూపించాలి.

Answer:

lowercase

True or False: text-transform HTML source text ను శాశ్వతంగా మార్చుతుంది.

Answer:

False. ఇది browser లో కనిపించే రూపాన్ని మాత్రమే మార్చుతుంది.

Quick Revision

text-transform text యొక్క letter case ను మార్చే CSS property.
uppercase అన్ని అక్షరాలను పెద్దగా చూపిస్తుంది.
lowercase అన్ని అక్షరాలను చిన్నగా చూపిస్తుంది.
capitalize ప్రతి పదం మొదటి అక్షరాన్ని పెద్దగా చూపిస్తుంది.
none text ను సాధారణ రూపంలో చూపిస్తుంది.
ఈ property HTML source text ను మార్చదు; browser display ను మాత్రమే మార్చుతుంది.

Text Transformation