CSS Color, Background, Border, Height, Width
আজকের পর্বে আমরা শিখবো কিভাবে CSS ব্যবহার করে আমাদের ওয়েবসাইটের এলিমেন্টগুলোকে রঙিন, বাউন্ডারিযুক্ত এবং আকর্ষণীয় করা যায়। CSS এর মাধ্যমে যেকোনো টেক্সট বা বক্সের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা যায়, বর্ডার যোগ করা যায় এবং নির্দিষ্ট উচ্চতা-প্রস্থ দেওয়া যায়। এই টপিকগুলো ওয়েব ডিজাইনের মূল ভিত্তি হিসেবে কাজ করে।
এই ভিডিওতে আমরা দেখবো চারটি গুরুত্বপূর্ণ প্রপার্টি:color, background, border, এবং height/width।প্রতিটি প্রপার্টির ব্যবহার, সিনট্যাক্স এবং উদাহরণ লাইভ প্রিভিউসহ দেখানো হবে।
তাহলে চল শুরু করি আমাদের CSS ডিজাইনের দ্বিতীয় ধাপ!
💻 কোড উদাহরণ:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.box {
color: white;
background-color: teal;
border: 2px solid black;
width: 300px;
height: 150px;
padding: 20px;
}
</style>
</head>
<body>
<div class="box">
This is a styled box using CSS!
</div>
</body>
</html>
📘 প্রতিটি লাইনের ব্যাখ্যা:
CSS Class - সিএসএস ক্লাস
✅ .box { ... }
👉 এখানে আমরা একটি CSS ক্লাস ব্যবহার করেছি যার নাম box, এবং সেটি একটি <div>-এ প্রয়োগ করেছি।
Text Colors CSS - টেক্সট কালার
✅ color: white;
👉 টেক্সটের রঙ সাদা করে দিচ্ছে।
Background Color CSS - ব্যাকগ্রাউন্ড কালার
✅ background-color: teal;
👉 বক্সের ব্যাকগ্রাউন্ড রঙ টিল করে দিচ্ছে (একটি সবুজ-নীল শেড)।
Border Color CSS - বর্ডার কালার
✅ border: 2px solid black;
👉 বক্সের চারপাশে ২ পিক্সেল পুরু, সলিড, কালো বর্ডার যোগ করছে।
✅ width: 300px;
👉 বক্সের প্রস্থ (width) ৩০০ পিক্সেল নির্ধারণ করা হয়েছে।
✅ height: 150px;
👉 বক্সের উচ্চতা (height) ১৫০ পিক্সেল নির্ধারণ করা হয়েছে।
✅ padding: 20px;
👉 বক্সের ভিতরের কনটেন্ট আর বর্ডারের মাঝখানে ২০ পিক্সেল জায়গা রাখছে।এই প্রপার্টিগুলো দিয়ে আমরা বক্স, হেডার, ফুটার, এবং যেকোনো কনটেন্ট এলিমেন্টকে সুন্দরভাবে সাজাতে পারি।
