Background Color

Background Color అంటే ఏమిటి?

CSSలో background-color property ద్వారా ఒక HTML element వెనుక కనిపించే రంగును మార్చవచ్చు. ఇది మొత్తం page, section, heading, paragraph, card వంటి elementsకు ఉపయోగించవచ్చు.

Syntax

selector {
  background-color: value;
}

value స్థానంలో color name, hexadecimal color, rgb() లేదా rgba() color value ఇవ్వవచ్చు. ఉదాహరణకు lightblue, #e8f1ff, rgb(232, 241, 255) వంటివి ఉపయోగించవచ్చు.

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

Browser HTML elementను గుర్తించి, దాని content మరియు padding వెనుక background colorను చూపిస్తుంది. Elementకు పరిమాణం లేకపోతే background కనిపించడానికి content లేదా height వంటి పరిమాణం అవసరం కావచ్చు.

ఉదాహరణ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Background Color</title>
  <style>
    body {
      background-color: #f2f7ff;
      font-family: Arial, sans-serif;
    }

    .notice {
      background-color: #d9f7e8;
      color: #174d32;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="notice">Your profile was updated successfully.</div>
</body>
</html>

ఇక్కడ body మొత్తం pageకు లేత నీలం background ఇస్తుంది. .notice class ఉన్న divకు లేత ఆకుపచ్చ background ఇస్తుంది.

Simple Explanation

background-color property ఒక element వెనుక రంగును నిర్ణయిస్తుంది.

body { background-color: #f2f7ff; } మొత్తం page backgroundను మార్చుతుంది.
.notice { background-color: #d9f7e8; } notice box backgroundను మార్చుతుంది.
Color valueను పేరు, hex, rgb() లేదా rgba() రూపంలో ఇవ్వవచ్చు.
Text readableగా ఉండేలా background మరియు text colors మధ్య మంచి contrast ఉంచాలి.

Real-Life Example

ఒక websiteలో success message చూపించే ఆకుపచ్చ notice boxను ఊహించండి. ఆ messageను ప్రత్యేకంగా కనిపించేలా చేయడానికి background-colorతో లేత ఆకుపచ్చ రంగు ఇస్తాం. అదే విధంగా pageకు చాలా లేత background ఇస్తే content చదవడం సులభంగా ఉంటుంది.

Code Examples

Page మరియు Noticeకు Background Color

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Background Color</title>
  <style>
    body {
      background-color: #f2f7ff;
      font-family: Arial, sans-serif;
    }

    .notice {
      background-color: #d9f7e8;
      color: #174d32;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="notice">Your profile was updated successfully.</div>
</body>
</html>

ఈ exampleలో bodyకు ఒక page background color మరియు .notice elementకు వేరే background color ఇచ్చాం. padding వల్ల text చుట్టూ ఖాళీ స్థలం ఏర్పడి notice box స్పష్టంగా కనిపిస్తుంది.

The page has a very light blue background. A light green notice box appears with dark green text saying "Your profile was updated successfully."

Line-by-Line Explanation

body {
body selector మొత్తం HTML pageను select చేస్తుంది.

background-color: #f2f7ff;
మొత్తం page వెనుకకు #f2f7ff అనే చాలా లేత నీలం రంగు ఇస్తుంది.

.notice {
.notice selector, class=”notice” ఉన్న elementను select చేస్తుంది.

background-color: #d9f7e8;
Notice box వెనుకకు #d9f7e8 అనే లేత ఆకుపచ్చ రంగును ఇస్తుంది.

color: #174d32;
Noticeలోని textకు dark green రంగు ఇస్తుంది. ఇది backgroundపై text readableగా ఉండేందుకు సహాయపడుతుంది.

padding: 20px;
Text మరియు box అంచుల మధ్య 20 pixels ఖాళీని ఇస్తుంది. అందువల్ల background color ఉన్న boxలో content చక్కగా కనిపిస్తుంది.

Your profile was updated successfully.

ఈ HTML elementకు notice class ఉంది. అందుకే CSSలోని .notice rules దీనిపై వర్తిస్తాయి.

Try It

Try this CSS code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try Background Color</title>
  <style>
    body {
      background-color: #fff8e1;
      font-family: Arial, sans-serif;
    }

    .card {
      background-color: #ffffff;
      color: #333333;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="card">Change the background colors and test your CSS.</div>
</body>
</html>

Try It Yourself »

Practice

Practice: పై practice_codeలో .tip boxకు light yellow background ఇవ్వండి. background-color property valueను మార్చి browserలో ఫలితాన్ని చూడండి.

Hint: .tip ruleలో background-color: #fff4b8; వంటి light yellow color value ఉపయోగించండి.

Common Mistakes

Propertyను background-colourగా రాయడం.
CSSలో సరైన property పేరు background-color. American English spellingలోని color ఉపయోగించాలి.

Color value తర్వాత semicolon పెట్టకపోవడం, ఉదాహరణకు background-color: yellow.
Declaration చివర semicolon పెట్టండి: background-color: yellow;.

Class selector ముందు dot పెట్టకపోవడం, ఉదాహరణకు notice { ... }.
classను select చేయడానికి class name ముందు dot పెట్టాలి: .notice { ... }.

Background color మరియు text color చాలా దగ్గరగా ఉండటం వల్ల text చదవడం కష్టంగా ఉండటం.
Background మరియు text మధ్య మంచి contrast ఉన్న colors ఎంచుకోండి.

Interview Questions

CSSలో background color మార్చడానికి ఏ property ఉపయోగిస్తారు?

Answer: background-color propertyను ఉపయోగిస్తారు.

background-color propertyను ఏ HTML elementsకు apply చేయవచ్చు?

Answer: దీనిని body, headings, paragraphs, divs, sections, cards వంటి దాదాపు అన్ని visible HTML elementsకు apply చేయవచ్చు.

background-colorలో ఎలాంటి color values ఉపయోగించవచ్చు?

Answer: Color names, hexadecimal values, rgb() మరియు rgba() values ఉపయోగించవచ్చు.

Exam Questions

క్రింది CSS code ఏమి చేస్తుంది? p { background-color: lightblue; }

Answer:

అన్ని paragraph elements వెనుక light blue background color చూపిస్తుంది.

సరైన CSS declaration రాయండి: ఒక elementకు hex code #eeeeee background ఇవ్వాలి.

Answer:

background-color: #eeeeee;

Class పేరు card ఉన్న elementకు background color ఇవ్వడానికి సరైన selector ఏది?

Answer:

.card సరైన class selector.

Quick Revision

background-color element వెనుక రంగును మార్చుతుంది.
Syntax: selector { background-color: value; }
Color name, hex, rgb() మరియు rgba() values ఉపయోగించవచ్చు.
Class selectorకు ముందు dot, ఉదాహరణకు .card, ఉపయోగించాలి.
Text readableగా ఉండేందుకు background మరియు text colorsకు మంచి contrast ఉంచాలి.

Background Color