CSS Background Color in Hindi | Complete Tutorial with Examples

Background Color क्या है?

Background Color का उपयोग किसी HTML Element या पूरे Web Page का Background (पृष्ठभूमि) रंग बदलने के लिए किया जाता है।

Definition:

Background Color वह CSS Property है जिसकी सहायता से किसी HTML Element की पृष्ठभूमि का रंग निर्धारित किया जाता है।

Syntax

selector{
    background-color: color;
}

Example 1 – Background Color Name

body{
    background-color: lightblue;
}

Output: पूरे Web Page का Background हल्का नीला (Light Blue) हो जाएगा।

Example 2 – Background Color (RGB)

body{
    background-color: rgb(255,255,0);
}

Output: Background Yellow दिखाई देगा।

Example 3 – Background Color (HEX)

body{
    background-color:#00FF00;
}

Output: Green Background दिखाई देगा।

Example 4 – Background Color (HSL)

body{
    background-color:hsl(200,100%,70%);
}

Background Color किन Elements पर लगाया जा सकता है?

• Body
• Heading
• Paragraph
• Div
• Table
• Button
• Form
• Section

Example – Heading Background

h1{
    background-color: yellow;
}

Example – Paragraph Background

p{
    background-color: pink;
}

Example – Div Background

div{
    background-color: lightgreen;
}

Complete Practical Example

<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:#f5f5f5;
}
h1{
background-color:yellow;
color:red;
padding:15px;
}
p{
background-color:lightgreen;
padding:10px;
}
div{
background-color:lightblue;
padding:20px;
margin-top:20px;
}
button{
background-color:green;
color:white;
padding:10px 20px;
border:none;
}
</style>
</head>
<body>
<h1>Welcome to UICT</h1>
<p>This is Background Color Example.</p>
<div>
This is DIV Background.
</div>
<br>
<button>Click Here</button>
</body>
</html>

Background Color के लाभ

• Website आकर्षक बनती है।
• Content पढ़ने में आसान होता है।
• Different Sections को अलग दिखाया जा सकता है।
• User Experience बेहतर होता है।
• Professional Design बनाने में मदद मिलती है।

ध्यान रखें

✔ Color Name

✔ RGB

✔ HEX

✔ HSL

चारों तरीकों से Background Color लगाया जा सकता है।

Viva Questions

Q1. Background Color क्या है?

Ans: HTML Element की पृष्ठभूमि का रंग बदलने वाली CSS Property।

Q2. Background Color की Property क्या है?

Ans:

background-color

Q3. Body का Background कैसे बदलते हैं?

body{
background-color:lightblue;
}

Q4. क्या Background Color सभी HTML Elements पर लगाया जा सकता है?

Ans: हाँ।

Q5. Background Color कितने तरीकों से लिखा जा सकता है?

Ans:

• Color Name
• RGB
• HEX
• HSL

Practical Assignment

Assignment 1

एक Web Page बनाइए जिसमें—

• Body Background = Light Blue
• Heading Background = Yellow
• Paragraph Background = Pink

Assignment 2

RGB का उपयोग करके—

• Red Background
• Green Background
• Blue Background

बनाइए।

Assignment 3

HEX Code का उपयोग करके—

• Header
• Main
• Footer

के अलग-अलग Background बनाइए।

Assignment 4

HSL का उपयोग करके 5 अलग-अलग Background Colors बनाइए।

Assignment 5

5 अलग-अलग <div> बनाइए और प्रत्येक का Background अलग रखें।

Assignment 6

एक Button बनाइए।

• Green Background
• White Text
• Hover होने पर Blue Background

Mini Project – Colorful Student Card

एक Student Profile Card बनाइए जिसमें—

• Student Photo (Placeholder)
• Name
• Course
• Mobile Number
• Address

सभी Sections के अलग-अलग Background Colors हों।

Final Project – UICT Landing Page

एक Landing Page तैयार करें जिसमें—

• Header (Dark Blue Background)
• Navigation (Black Background)
• Hero Section (Light Blue Background)
• About Section (Light Gray Background)
• Courses Section (White Background)
• Contact Section (Light Yellow Background)
• Footer (Dark Gray Background)

उपयोग करें

• Background Color
• Text Color
• Padding
• Margin
• Border
• Border Radius

Lab Practical

File Name: background-color-practical.html

Requirements

• ✔ Background Color
• ✔ Heading Background
• ✔ Paragraph Background
• ✔ Div Background
• ✔ Button Background
• ✔ RGB Colors
• ✔ HEX Colors
• ✔ HSL Colors
• ✔ Hover Effect

Home Assignment

1. Background Color क्या है?
2. Background Color की Property लिखिए।
3. Background Color कितने तरीकों से लगाया जा सकता है?
4. RGB द्वारा Background Color का उदाहरण लिखिए।
5. HEX द्वारा Background Color का उदाहरण लिखिए।
6. HSL द्वारा Background Color का उदाहरण लिखिए।
7. Body का Background Color कैसे बदलते हैं?
8. पाँच HTML Elements के नाम लिखिए जिन पर Background Color लगाया जा सकता है।
9. पाँच अलग-अलग Background Colors के साथ एक Web Page बनाइए।
10. एक सुंदर Landing Page तैयार करें जिसमें कम से कम 8 अलग-अलग Background Colors का उपयोग किया गया हो।