সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

সিএসএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction গঠনপ্রণালী-Syntax ব্যবহার পদ্ধতি-Use কালার-Color ব্যাকগ্রাউন্ড-Background বর্ডার-Border মার্জিন-Margin প্যাডিং-Padding উচ্চতা/প্রস্থ-Height/Width বক্সমডেল-BoxModel আউটলাইন-Outline টেক্সট-Text ফন্ট-Font লিংক-Link লিস্ট-List টেবিল-Table প্রদর্শনী-Display সর্বোচ্চ উচ্চতা-Maxwidth পজিশন-Position ওভারফ্লো-Overflow ফ্লট-Float ইনলাইন-ব্লক-Inlineblock এলাইন-Align কম্বিন্যাটর-Combinator সুডো-ক্লাস-PseudoClass সুডো-এলিমেন্ট-PseudoElement প্রোপার্টি-Opacity ন্যাভিগেশনবার-NavigationBar ড্রপডাউন-Dropdown টুলটিপ-Tooltip ইমেজ গ্যালারী-ImageGallery ইমেজ স্প্রাইট-ImageSprite এট্রিবিউট সিলেক্টর-AttrSelector ফর্ম-Form কাউন্টার-Counter

সিএসএস-৩

ভূমিকা-Introduction রাউন্ডেড কর্নার-RoundedCorner বর্ডারইমেজ-Border Image ব্যাকগ্রাউন্ড-Background কালার-Color গ্র্যাডিয়েন্ট-Gradient স্যাডো-Shadow টেক্সট-Text 3ফন্ট-Font 2D ট্রান্সফর্ম-Transform 3D ট্রান্সফর্ম-Transform ট্রানজিশন-Transition এনিমেশন-Animation ইমেজ-Image বাটন-Button পেজিনেশন-Pagination মাল্টি-কলাম-MultColumn ইউজার ইন্টারফেস-UserInterface বক্স সাইজিং-BoxSizing ফ্লেক্সবক্স-Flexbox মিডিয়া কুয়েরি-MediaQuery মিডিয়া কুয়েরি উদাহরণ

সিএসএস রেসপন্সিভ

রেসপন্সিভ পরিচিতি-Introduction রেসপন্সিভ ভিউপোর্ট-Viewport রেসপন্সিভ গ্রাইড ভিউ-Grid View রেসপন্সিভ মিডিয়া কুয়েরি-Media Query রেসপন্সিভ ইমেজ-Image রেসপন্সিভভিডিও-Video ফ্রেমওয়ার্ক-Frameworks

সিএসএস রেফারেন্স

রেফারেন্স-Reference সিলেক্টর-Selector ফাংশন-Function রেফারেন্স আউরাল-ReferenceAural ওয়েব সেফ ফন্ট-WebSafeFont এনিমেটেবল-Animatable ইউনিট-Unit PX-EM কনভার্টার-Converter কালার-Color কালার ভ্যালু-ColorValue ডিফল্ট ভ্যালু-DefaultValue ব্রাউজার সাপোর্ট-BrowserSupport

 

সিএসএস কালার(color)


আপনারা প্রতিনিয়তই বিভিন্ন সাইট ভিজিট করেন। লক্ষ্য করলে দেখবেন সাইটগুলোর কালারের ভিন্নতা আছে। সাইটসমূহের এই কালারের ভিন্নতা অর্থাৎ কালার সেট করা হয় সিএসএস দিয়ে।

সিএসএস দিয়ে কালার সেট করার জন্য অধিকাংশ সময় নিচের যেকোনো একটি পদ্ধতি ব্যবহৃত হয়।

  • কালারের নাম ব্যবহার করে- যেমন "red"
  • RGB ভ্যালু ব্যবহার করে - যেমন "rgb(255, 0, 0)"
  • HEX ভ্যালু ব্যবহার করে - যেমন "#ff0000"


কালারের নাম

কালারের নাম ব্যবহার করে কালার সেট করা যায়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<body>

  <h2>কালার নাম ব্যবহার করে কালার করার উদাহরণঃ</h2>
  <p style="background-color:teal">তিল ব্যাকগ্রাউন্ড কালার</p>
  <p style="background-color:orange">কমলা ব্যাকগ্রাউন্ড কালার</p>
  <p style="background-color:pink">পিংক ব্যাকগ্রাউন্ড কালার</p>
  <p style="background-color:green">সবুজ ব্যাকগ্রাউন্ড কালার</p>
  <p style="background-color:red">লাল ব্যাকগ্রাউন্ড কালার</p>
  <p style="background-color:yellow">হলুদ ব্যাকগ্রাউন্ড কালার</p>
  <p style="background-color:blue">নীল ব্যাকগ্রাউন্ড কালার</p>

</body>
</html>

বিঃদ্রঃ কালারের নাম কেস-সেনসিটিভ নয়। যেমন- "Red", "red" অথবা "RED" একই।

ফলাফল





RGB (Red, Green, Blue)

rgb(red, green, blue) সূত্র অনুসারে RGB কালার ভ্যালু সেট করা হয়।

প্রতিটি প্যারামিটার (red, green, blue)-এর ভ্যালু 0 থেকে 255 এর মধ্যে হতে হবে। কারণ কালারের সর্বোচ্চ ভ্যালু 255 এবং সর্বনিম্ন ভ্যালু 0।

উদাহরণস্বরূপ, rgb(255,0,0) এর রং লাল হবে। কারণ এখানে লাল কালারের ভ্যালু সেট করা হয়েছে 255 এবং অন্যান্য কালারের ভ্যালু সেট করা হয়েছে 0। নিচে RGB এর বিভিন্ন ভ্যালু মিশ্রন করে পরীক্ষা করুনঃ

Red Green Blue
255 0 0


উদাহরণ

<!DOCTYPE html>
<html>
<body>

<h2>RGB কালারের উদাহরণঃ</h2>
<p style="background-color:rgb(26, 255, 26)">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>
<p style="background-color:rgb(224, 102, 255)">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>
<p style="background-color:rgb(0,0,255)">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>
<p style="background-color:rgb(102, 102, 255)">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>
<p style="background-color:rgb(138, 138, 92)">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>
<p style="background-color:rgb(255,0,0)">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>
<p style="background-color:rgb(128, 191, 255)">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>

</body>
</html>

ফলাফল





হালকা ধূসর অথবা গাঢ় ধূসর অথবা শুধু ধূসর কালার করার জন্য ৩টি ভ্যালুই সমান রাখতে হবে।

উদাহরণ

<!DOCTYPE html>
<html>
<body>

<h2>RGB কালারের উদাহরণঃ</h2>
<p style="background-color:rgb(100,100,100);">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>
<p style="background-color:rgb(150,150,150);">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>
<p style="background-color:rgb(200,200,200)">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>

</body>
</html>

ফলাফল





হেক্সাডেসিমাল কালার

হেক্সাডেসিমাল কালার ভ্যালু দিয়েও RGB কালার ভ্যালু সেট করা যায়। যেমন- #RRGGBB, এখানে RR (red), GG (green) এবং BB (blue) হলো 00 থেকে FF এর মধ্যে হেক্সাডেসিমাল ভ্যালু যা RGB এর 0-255 এর মতোই।

উদাহরণস্বরূপ, #FF0000 এর ভ্যলু লাল হবে। কারণ এখানে লাল কালারের ভ্যালু সেট করা হয়েছে FF এবং অন্যান্য কালারের ভ্যালু সেট করা হয়েছে 00।

উদাহরণ

<!DOCTYPE html>
<html>
<body>

<h2>HEX কালার উদাহরণঃ</h2>
<p style="background-color:#FF0000">হেক্সাডেসিমাল ভ্যালু ব্যবহার করে কালার সেট করা হয়েছে।</p>
<p style="background-color:#00FF00">হেক্সাডেসিমাল ভ্যালু  ব্যবহার করে কালার সেট করা হয়েছে।</p>
<p style="background-color:#0000FF">হেক্সাডেসিমাল ভ্যালু ব্যবহার করে কালার সেট করা হয়েছে।</p>
<p style="background-color:#FF00FF">হেক্সাডেসিমাল ভ্যালু  ব্যবহার করে কালার সেট করা হয়েছে।</p>
<p style="background-color:#FFFF00">হেক্সাডেসিমাল ভ্যালু  ব্যবহার করে কালার সেট করা হয়েছে।</p>
<p style="background-color:#00FFFF">হেক্সাডেসিমাল ভ্যালু ব্যবহার করে কালার সেট করা হয়েছে।</p>

</body>
</html>

বিঃদ্রঃ হেক্সাডেসিমাল ভ্যালু কেস-সেনসিটিভ নয়। যেমন- "#ff0000" এবং "FF0000" একই।

ফলাফল





হালকা ধূসর অথবা গাঢ় ধূসর অথবা শুধু ধূসর কালার করার জন্য ৩টি ভ্যালুই সমান রাখতে হবে।

উদাহরণ

<!DOCTYPE html>
<html>
<body>

<h2>RGB কালারের উদাহরণঃ</h2>
<p style="background-color:#606060;">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>
<p style="background-color:#808080;">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>
<p style="background-color:#a0a0a0">RGB ভ্যালু ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট করা হয়েছে।</p>

</body>
</html>

ফলাফল