HTML এলিমেন্টে ব্যাকগ্রাউন্ড রঙ যোগ করতে, আপনি CSS প্রপার্টি background-color ব্যবহার করতে পারেন।
ধরা যাক, আপনার নিচের HTML মার্কআপ আছে, এবং আপনি <body> এলিমেন্টে ব্যাকগ্রাউন্ড রঙ যোগ করতে চান:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Changing background color in HTML/CSS</title> </head> <body> <h1>Here's an awesome website!</h1> </body> </html>ব্যাকগ্রাউন্ড রঙ যোগ করার সবচেয়ে সহজ উপায় হলো আপনার HTML ডকুমেন্টে একটি ইন্টারনাল <style> এলিমেন্ট তৈরি করা।
HTML-এ <head> এলিমেন্টে, একটি সেট <style></style> ট্যাগ তৈরি করুন। তারপর <style> এলিমেন্টে ব্যাকগ্রাউন্ড রঙের জন্য CSS স্টাইল রুল যোগ করুন।
<head> <meta charset="UTF-8"> <title>Changing background color in HTML/CSS</title> <style> body { background-color: #78a8eb; } </style> </head>এই HTML এবং CSS কোড নিচের মতো একটি ওয়েবপেজ তৈরি করবে!
রঙ নোটেশন
background-color প্রপার্টির জন্য #78a8eb মানটি হেক্সাডেসিমাল নোটেশনে লেখা হয়েছে, যাকে হেক্সও বলা হয়। এটি রঙকে লাল, সবুজ এবং নীল চ্যানেলের জন্য একটি ক্যারেক্টার সেট দিয়ে রিপ্রেজেন্ট করে। ক্যারেক্টারগুলো ০ থেকে ৯ সংখ্যা, তারপর A-F অক্ষর পর্যন্ত থাকে। শূন্য (০) সবচেয়ে কম মান, এবং F সবচেয়ে বেশি মান।
আপনি CSS-এ রঙ অন্যান্য নোটেশনেও রিপ্রেজেন্ট করতে পারেন।
উদাহরণস্বরূপ, ফাংশনাল নোটেশনে, রঙটি rgba() ফরম্যাটে ফরম্যাট করা হয়। আমাদের উদাহরণে ব্যাকগ্রাউন্ড রঙটি নিচের মতো লেখা যাবে:
background-color: rgb(120, 168, 235);অথবা HSL (Hue, Saturation, Lightness) নোটেশনে এটিকে নিচের মতো লেখা যাবে:
background-color: hsl(215, 74%, 70%);রঙ লেখার এই তিনটি পদ্ধতিই আধুনিক ব্রাউজারগুলোতে গ্রহণযোগ্য।
অপ্রচলিত পদ্ধতিগুলো (ব্যবহার করবেন না)
ওয়েব Стан্ডার্ডের পুরনো ভার্সনে, লোকেরা HTML ট্যাগে সরাসরি হেক্স রঙের সাথে bgcolor প্রপার্টি ব্যবহার করত:
<body bgcolor="#78a8eb" ></body>তবে, এটি ব্যাকগ্রাউন্ড রঙ সেট করার একটি পুরনো পদ্ধতি। আপনি আর এটি ব্যবহার করবেন না— শুধু CSS স্টাইল লিখে রঙ কন্ট্রোল করুন।
