আমরা কোন সাইটে প্রবেশ করলে সাইটের বিভিন্ন অংশ বিভিন্ন কালারের দেখতে পাই অর্থাৎ কালারের ভিন্নতা দেখতে পাই । আর এই কালারের ভিন্নতা অর্থাৎ কালার সেট করা হয় CSS দিয়ে।
CSS দিয়ে কালার সেট করার জন্য অধিকাংশ সময় নিচের যেকোনো একটি পদ্ধতি অবলম্বন করতে হয়। যেমন ঃ
- Color এর নাম ব্যবহার করে- যেমন "red"
- HEX ভ্যালু ব্যবহার করে - যেমন "#ff0000"
- RGB ভ্যালু ব্যবহার করে - যেমন "rgb(255, 0, 0)"
- › পদ্ধতি ১ঃ Color Name —
এই পদ্ধতি অবলম্বন করে যেকোন Color এর নাম ব্যবহার করে color সেট করা যায় । যেমন ঃ
<!DOCTYPE html>
<html>
<body>
<h2> Color Name ব্যবহার করে color করার উদাহরণঃ</h2>
<p style="background-color:teal">Teal Background Color</p>
<p style="background-color:green">Green Background Color</p>
<p style="background-color:red">Red Background Color</p>
<p style="background-color:pink">Pink Background Color</p>
<p style="background-color:blue">Blue Background Color</p>
</body>
</html>
*Result —
Color Name ব্যবহার করে color করার উদাহরণঃ
Teal Background Color
Green Background Color
Red Background Color
Pink Background Color
Blue Background Color
- › পদ্ধতি ২ঃ Hexadecimal Color —
Hexadecimal কালার ভ্যালু অবলম্বন করে color সেট করা যায় । তাছাড়া Hexadecimal কালার ভ্যালু দিয়েও RGB কালার ভ্যালু সেট করা যায়।
যেমন- #RRGGBB, এখানে RR (red), GG (green) এবং BB (blue) হলো 00 থেকে FF এর মধ্যে হেক্সাডেসিমাল ভ্যালু যা RGB এর 0-255 এর মতোই। উদাহরণ ঃ
যেমন- #RRGGBB, এখানে RR (red), GG (green) এবং BB (blue) হলো 00 থেকে FF এর মধ্যে হেক্সাডেসিমাল ভ্যালু যা RGB এর 0-255 এর মতোই। উদাহরণ ঃ
<!DOCTYPE html>
<html>
<body>
<h2>HEX color উদাহরণঃ</h2>
<p style="background-color:#FF0000">Hexadecimal Value ব্যবহার করে লাল color সেট করা হয়েছে।</p>
<p style="background-color:#0000FF">Hexadecimal Value ব্যবহার করে নীল color সেট করা হয়েছে।</p>
<p style="background-color:#FFFF00">Hexadecimal Value ব্যবহার করে হলুদ color সেট করা হয়েছে।</p>
</body>
</html>
- Result —
HEX color উদাহরণঃ
Hexadecimal Value ব্যবহার করে লাল color সেট করা হয়েছে।
Hexadecimal Value ব্যবহার করে নীল color সেট করা হয়েছে।
Hexadecimal Value ব্যবহার করে হলুদ color সেট করা হয়েছে।
- › পদ্ধতি ৩ঃ RGB (Red, Green, Blue) Value —
প্রতিটি প্যারামিটার (red, green, blue)-এর ভ্যালু 0 থেকে 255 এর মধ্যে হয়ে থাকে ।
অর্থাৎ RGB Color এর —
- সর্বোচ্চ ভ্যালু 255 এবং
- সর্বনিম্ন ভ্যালু 0।
যেমনঃ ধরুন RGB Value দিয়ে background color লাল করতে হবে । তাহলে value হিসেবে লাল Color এর value নিতে হবে 255, সবুজ color value নিতে হবে 0 এবং নীল color value অ নিতে হবে 0।
তাহলে আমাদের Background color লাল করতে RGB Value নিতে হচ্ছে — rgb(255,0,0) এর রং লাল হবে। যেমন —
<html>
<body>
<p style="background-color: rgb(255,0,0)">RGB value দ্বারা background color লাল</p>
</body>
</html>
- Result —
RGB value দ্বারা background color লাল