CSS Color Values

CSS Color Values

CSSలో color value అంటే browserకు ఒక రంగును సూచించే value. ఈ valueను color, background-color, border-color వంటి color-related propertiesతో ఉపయోగిస్తాము.

Color value ఎందుకు ఉపయోగిస్తాము?

Text, background, border వంటి భాగాల రంగును మార్చడానికి color values ఉపయోగిస్తాము. సరైన రంగులను ఎంచుకోవడం వల్ల page చదవడానికి సులభంగా మరియు visually clearగా ఉంటుంది.

Syntax

selector {
  property: color-value;
}

ఉదాహరణకు, color: navy;లో color property, navy color value. Browser ఆ valueను అర్థం చేసుకుని textను ఆ రంగులో చూపిస్తుంది.

Color value ఎక్కడ ఉపయోగించవచ్చు?

• color – text రంగు కోసం
• background-color – element background రంగు కోసం
• border-color – border రంగు కోసం

CSSలో colors రాయడానికి అనేక formats ఉన్నాయి. ఈ lessonలో color value యొక్క పాత్ర మరియు దాన్ని propertyతో ఎలా apply చేయాలో అర్థం చేసుకుంటాము. Named colors, HEX, RGB, HSL formatsను తరువాతి lessonలో వివరంగా నేర్చుకుంటాము.

Browserలో ఇది ఎలా పనిచేస్తుంది?

Browser ముందుగా selectorతో సరిపోయే HTML elementను కనుగొంటుంది. తరువాత declarationలోని color valueను చదివి, ఆ elementకు ఆ రంగును apply చేస్తుంది. ఒకే elementపై text color మరియు background color వేర్వేరుగా ఉండవచ్చు.

Simple Explanation

Color value అనేది CSSలో రంగు చెప్పే భాగం. ఉదాహరణకు color: navy;లో navy అనేది color value. Property ఏ భాగానికి రంగు కావాలో చెబుతుంది; value ఏ రంగు కావాలో చెబుతుంది.

Textకు రంగు ఇవ్వడానికి color, వెనుక భాగానికి రంగు ఇవ్వడానికి background-color ఉపయోగించండి. CSS declarationను selector ruleలో రాయాలి.

Real-Life Example

ఒక traffic signలో ఎరుపు background మరియు తెల్లటి text ఉంటే, దాన్ని దూరం నుంచే సులభంగా గుర్తించగలుగుతాము. అలాగే websiteలో headingకు ఒక text color, notice boxకు ఒక background color ఇస్తే content ముఖ్యమైనదిగా కనిపిస్తుంది.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Color Values</title>
  <style>
    body {
      background-color: #f2f7ff;
    }

    h1 {
      color: navy;
    }

    .notice {
      color: white;
      background-color: #2563eb;
      border-color: navy;
    }
  </style>
</head>
<body>
  <h1>Color Values</h1>
  <p class="notice">This notice uses different CSS color values.</p>
</body>
</html>

The page shows a very light blue background. The heading appears in navy. The notice appears with white text on a blue background; its border color is set to navy.

Line-by-Line Explanation

Try It

Try this CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try CSS Color Values</title>
  <style>
    body {
      background-color: #f2f7ff;
    }

    h1 {
      color: navy;
    }

    p {
      color: #2563eb;
    }
  </style>
</head>
<body>
  <h1>My Color Page</h1>
  <p>Change the color values and run the page again.</p>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• Color value browserకు ఏ రంగు చూపించాలో చెబుతుంది.
• color text రంగును మార్చుతుంది.
• background-color element వెనుక భాగం రంగును మార్చుతుంది.
• CSS declaration రూపం: property: color-value;.
• Selector సరైన HTML elementను select చేసినప్పుడు color declaration ఆ elementకు apply అవుతుంది.
• Named colors, HEX, RGB మరియు HSL formatsను తరువాతి lessonలో వివరంగా నేర్చుకుంటాము.