नीचे CSS Colors चैप्टर के लिए Student Notes दिए गए हैं। इसमें Colors, RGB, HEX और HSL चारों टॉपिक शामिल हैं।
CSS Notes – CSS Colors (हिंदी)
Chapter: CSS Colors
CSS Colors क्या हैं?
CSS Colors का उपयोग Web Page के विभिन्न Elements जैसे Text, Background, Border, Button, Shadow आदि का रंग (Color) निर्धारित करने के लिए किया जाता है।
Definition:
CSS Colors का उपयोग HTML Elements के रंग को नियंत्रित करने के लिए किया जाता है, जिससे Web Page आकर्षक (Attractive) और उपयोगकर्ता के लिए बेहतर (User-Friendly) दिखाई देता है।
CSS में Color लगाने का Syntax
selector{
color: value;
}
Example
h1{
color: red;
}
Output: Heading का रंग Red हो जाएगा।
CSS में Color लगाने के तरीके
CSS में Color को मुख्य रूप से 4 तरीकों से लिखा जाता है—
- Color Name
- RGB Color
- HEX Color
- HSL Color
1. Color Name
इसमें रंग का नाम लिखा जाता है।
Example
h1{
color: blue;
}
p{
color: green;
}
कुछ सामान्य Color Names
| Color | Name |
|---|---|
| 🔴 | Red |
| 🟢 | Green |
| 🔵 | Blue |
| ⚫ | Black |
| ⚪ | White |
| 🟡 | Yellow |
| 🟠 | Orange |
| 🩷 | Pink |
| 🟣 | Purple |
| 🟤 | Brown |
2. RGB Color
RGB का पूरा नाम Red, Green, Blue है।
प्रत्येक रंग की Value 0 से 255 तक होती है।
Syntax
rgb(red, green, blue)
Example
h1{
color: rgb(255,0,0);
}
Output: Red Color
Example
p{
color: rgb(0,255,0);
}
Output: Green Color
RGB Table
| Color | RGB |
|---|---|
| Red | rgb(255,0,0) |
| Green | rgb(0,255,0) |
| Blue | rgb(0,0,255) |
| White | rgb(255,255,255) |
| Black | rgb(0,0,0) |
3. HEX Color
HEX का पूरा नाम Hexadecimal Color Code है।
यह हमेशा # से शुरू होता है।
Syntax
#RRGGBB
Example
h1{
color:#FF0000;
}
Example
body{
background-color:#FFFF00;
}
Common HEX Colors
| Color | HEX |
|---|---|
| Red | #FF0000 |
| Green | #00FF00 |
| Blue | #0000FF |
| Black | #000000 |
| White | #FFFFFF |
| Yellow | #FFFF00 |
4. HSL Color
HSL का पूरा नाम है—
Hue, Saturation, Lightness
Syntax
hsl(Hue, Saturation%, Lightness%)
Example
h1{
color:hsl(0,100%,50%);
}
Example
body{
background-color:hsl(120,100%,50%);
}
HSL का अर्थ
| भाग | अर्थ |
|---|---|
| Hue | Color |
| Saturation | Color की गहराई |
| Lightness | Color की चमक |
Background Color
body{
background-color:lightblue;
}
Text Color
p{
color:red;
}
Border Color
div{
border:2px solid blue;
}
Complete Practical
Red Color
RGB Color
HEX Color
HSL Color
Welcome to CSS Colors Chapter.
Viva Questions
Q1. CSS Colors क्या हैं?
Ans: CSS Colors का उपयोग HTML Elements का रंग बदलने के लिए किया जाता है।
Q2. CSS में कितने प्रकार से Color लिखा जा सकता है?
Ans: 4 प्रकार से—
- Color Name
- RGB
- HEX
- HSL
Q3. RGB का पूरा नाम क्या है?
Ans: Red Green Blue
Q4. HEX Color किस चिन्ह से शुरू होता है?
Ans: #
Q5. HSL का पूरा नाम क्या है?
Ans: Hue Saturation Lightness
Final Assignment
Assignment 1
एक Web Page बनाइए जिसमें—
- Heading (Red)
- Paragraph (Green)
- Background (Yellow)
हो।
Assignment 2
RGB का उपयोग करके 5 अलग-अलग रंग बनाइए।
Assignment 3
HEX Color का उपयोग करके 5 अलग-अलग Text Colors बनाइए।
Assignment 4
HSL का उपयोग करके 5 अलग-अलग Background Colors बनाइए।
Mini Project
“Color Gallery” नाम से एक Web Page बनाइए जिसमें—
- 10 अलग-अलग Color Boxes हों।
- प्रत्येक Box में Color Name लिखा हो।
- कुछ Colors Color Name से, कुछ RGB, कुछ HEX, और कुछ HSL से बनाए जाएँ।
- प्रत्येक Box पर Border और Padding भी लगाएँ।
Home Assignment
- CSS Colors क्या हैं?
- CSS में Color लगाने के कितने तरीके हैं?
- RGB का पूरा नाम लिखिए।
- HEX Color क्या है?
- HSL का पूरा नाम लिखिए।
- Color Name और HEX Color में क्या अंतर है?
- RGB और HSL में क्या अंतर है?
- पाँच Color Names लिखिए।
- पाँच HEX Codes लिखिए।
- RGB, HEX और HSL का उपयोग करके एक Web Page तैयार कीजिए।
निष्कर्ष (Conclusion)
CSS Colors वेब पेज को आकर्षक और उपयोगकर्ता के अनुकूल बनाने का महत्वपूर्ण हिस्सा हैं। CSS में Color Name, RGB, HEX और HSL के माध्यम से रंगों को नियंत्रित किया जाता है। इन सभी तरीकों का अभ्यास करने से आप Professional Web Pages आसानी से डिज़ाइन कर सकते हैं।