CSS Background Color

কিভাবে css লিখতে হয় সেটি দেখাতে উদাহরণ হিসেবে কিভাবে text এর কালার পরিবর্তন করতে হয় সেটি দেখানো হয়েছে। এই অংশে আমরা দেখব কিভাবে background-color css এর মাধ্যমে একটি HTML Element এর ব্যাকগ্রাউন্ড পরিবর্তন করা যায়। নিচের উদাহরণটি দেখুন, বোঝার চেষ্টা করুন, না বুঝলে উদাহরণ এর নিচে আমার ব্যাখ্যাটি দেখুন

ফলাফল

আপনি একটু খেয়াল করলে css লেখার কৌশলটি ধরে ফেলেছেন। css এর property জানা থাকলে খুব সহজেই তা লিখে ফেলা যায় যেমন ব্যাকগ্রাউন্ড পরিবর্তন করার css property হল background-color. তাই h1 এর ব্যাকগ্রাউন্ড পরিবর্তন করে দূসর বা gray কালার করতে css টি হয়েছে নিচের মতঃ

 h1{
     background-color: gray; 
   }

এখন প্রশ্ন হলো আমার কি সব কালারের নাম মুখস্ত করতে হবে। সংক্ষেপে উত্তর হল না।  কোন কিছুই মুখস্ত করতে হবে না। তাহলে কিভাবে অন্যান্য কালার আপনি color অথবা background-color এর css হিসেবে দিবেন? এর জন্য প্রতিটি কালারের একটি ছয় সংখ্যার মান আছে যেমন দূসর বা gray কালারের মান 666666. মানগুলোর আগে # দিয়ে দিলেই হবে অর্থাৎ উদাহরণটি হবে নিচের মত

ফলাফল

এখানে 666666 কে কালার কোড বলে। এখন আবার প্রশ্ন আসে এই কালার কোড গুলো কিভাবে মনে রাখব। আবারও উত্তর হল মনে রাখতে হবে না। কিছু সফটওয়্যার আছে যেটির মাধ্যমে আপনি কোন কালারের উপর ধরলে সেটির কালার কোড দেখতে পাবেন। নিচে এমন একটি সফটওয়্যার এর লিঙ্ক দিয়ে দিলাম সেটি ব্যবহার করে আপনার পছন্দের যে কোন কালারের কালার কোড নিয়ে নিন।

Download colorpix

একটি HTML Element এর উপর যত খুশি তত css property যোগ করতে পারেন। যেমনঃ h5 ট্যাগের text এর কালার যদি সাদা এবং ব্যাকগ্রাউন্ড কালো করতে চান তাহলে background-color: black; এবং color: white; লিখে দিলেই হবে। অর্থাৎ সম্পূর্ন কোডটি হবে নিচের মতঃ

ফলাফল