Text Color and Alignment

Text Color and Alignment అంటే ఏమిటి?

CSSలో text యొక్క రంగును మార్చడానికి color propertyని ఉపయోగిస్తాము. Text ఎటువైపు కనిపించాలో నిర్ణయించడానికి text-align propertyని ఉపయోగిస్తాము.

color property

color property text colorను మార్చుతుంది. దీనికి color name, hexadecimal value లేదా RGB value ఇవ్వవచ్చు.

• color: navy; — color name
• color: #2563eb; — hexadecimal color
• color: rgb(37, 99, 235); — RGB color

text-align property

text-align property textను horizontal directionలో align చేస్తుంది.

• text-align: left; — ఎడమ వైపు
• text-align: center; — మధ్యలో
• text-align: right; — కుడి వైపు

ఈ propertiesను HTML elementsకి selector ద్వారా apply చేస్తాము. Browser HTML textను చదివి, CSS rules ప్రకారం దాని రంగు మరియు స్థానాన్ని మార్చుతుంది.

Runnable Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Text Color and Alignment</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    h1 {
      color: #1d4ed8;
      text-align: center;
    }

    p {
      color: #374151;
      text-align: right;
    }
  </style>
</head>
<body>
  <h1>Welcome to CSS</h1>
  <p>CSS makes text clear and attractive.</p>
</body>
</html>

ఈ exampleను HTML-capable browser editorలో paste చేసి run చేయండి. CSSలో color values లేదా text-align values మార్చి browser resultను గమనించండి.

Simple Explanation

color text ఏ రంగులో కనిపించాలో నిర్ణయిస్తుంది. text-align text ఎడమ, మధ్య లేదా కుడి వైపు కనిపించాలో నిర్ణయిస్తుంది.

ఉదాహరణకు, headingను నీలం రంగులో మధ్యలో ఉంచడానికి ఇలా రాయవచ్చు:

h1 {
  color: blue;
  text-align: center;
}

ఒకే CSS ruleలో రెండు లేదా అంతకంటే ఎక్కువ declarations రాయవచ్చు. ప్రతి declaration చివర semicolon పెట్టడం మంచి పద్ధతి.

Real-Life Example

ఒక school notice boardను ఊహించండి. Notice headingను నీలం రంగులో మధ్యలో ఉంచితే అది వెంటనే కనిపిస్తుంది. Detailsను ముదురు బూడిద రంగులో కుడివైపు ఉంచవచ్చు. Web pageలో color మరియు text-align properties ఇదే విధంగా text presentationను మెరుగుపరుస్తాయి.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Text Color and Alignment</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    h1 {
      color: #1d4ed8;
      text-align: center;
    }

    p {
      color: #374151;
      text-align: right;
    }
  </style>
</head>
<body>
  <h1>Welcome to CSS</h1>
  <p>CSS makes text clear and attractive.</p>
</body>
</html>

The heading “Welcome to CSS” appears in blue at the center. The paragraph appears in dark gray aligned to the right.

Line-by-Line Explanation

Try It

Try this CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try Text Styling</title>
  <style>
    h1 {
      color: darkgreen;
      text-align: center;
    }

    p {
      color: #444444;
      text-align: left;
    }
  </style>
</head>
<body>
  <h1>My Web Page</h1>
  <p>I am learning text styling with CSS.</p>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• color property text రంగును మార్చుతుంది.
• text-align property textను left, center లేదా rightకి align చేస్తుంది.
• Colorను name, hexadecimal లేదా RGB valueగా రాయవచ్చు.
• ప్రతి CSS declarationను సాధారణంగా semicolonతో ముగించాలి.
• CSS selector సరైన HTML elementతో match అవ్వాలి.