HTML CSS
এইচটিএমএল এবং সিএসএস টিউটোরিয়াল (বাংলায়)
এই টিউটোরিয়ালে আমরা এইচটিএমএল-এর সাথে সিএসএস (ক্যাসকেডিং স্টাইল শীট) ব্যবহার করে ওয়েব পেজ স্টাইল করার মৌলিক বিষয় শিখব। সিএসএস ওয়েব পেজের চেহারা ও লেআউট নিয়ন্ত্রণ করে।
১. সিএসএস কী?
সিএসএস হলো ক্যাসকেডিং স্টাইল শীট, যা এইচটিএমএল উপাদানগুলোর স্টাইল (যেমন রং, ফন্ট, লেআউট) নির্ধারণ করতে ব্যবহৃত হয়। এটি তিনটি উপায়ে যোগ করা যায়:
- ইনলাইন সিএসএস: এইচটিএমএল ট্যাগের মধ্যে
styleঅ্যাট্রিবিউট ব্যবহার করে। - ইন্টারনাল সিএসএস:
<style>ট্যাগের মাধ্যমে<head>সেকশনে। - এক্সটারনাল সিএসএস: আলাদা
.cssফাইলে লিখে<link>ট্যাগ দিয়ে সংযোগ করা।
২. সিএসএস সিনট্যাক্স
সিএসএস নিয়ম সিনট্যাক্স: সিলেক্টর { প্রপার্টি: মান; }
উদাহরণ: p { color: blue; font-size: 16px; } মানে সব প্যারাগ্রাফের টেক্সট নীল রঙের এবং ফন্ট সাইজ ১৬ পিক্সেল হবে।
৩. সিএসএস ব্যবহারের উদাহরণ
উদাহরণ ১: ইনলাইন সিএসএস
এই টেক্সটটি লাল রঙে এবং বোল্ড।
কোড:
<p style="color: red; font-weight: bold;">এই টেক্সটটি লাল রঙে এবং বোল্ড।</p>
উদাহরণ ২: ইন্টারনাল সিএসএস
এই টেক্সটটি ইন্টারনাল সিএসএস দিয়ে স্টাইল করা হয়েছে।
কোড:
<style>
.internal-example {
background-color: #e6f3ff;
padding: 10px;
border: 2px solid #3498db;
color: #2c3e50;
}
</style>
<p class="internal-example">এই টেক্সটটি ইন্টারনাল সিএসএস দিয়ে স্টাইল করা হয়েছে।</p>
উদাহরণ ৩: এক্সটারনাল সিএসএস (সিমুলেশন)
এক্সটারনাল সিএসএস-এর জন্য একটি আলাদা .css ফাইল তৈরি করা হয় এবং <link> ট্যাগ দিয়ে যুক্ত করা হয়। এখানে আমরা ইন্টারনাল সিএসএস দিয়ে সিমুলেট করছি।
কোড:
<!-- style.css ফাইলে -->
.external-example {
background-color: #fff3cd;
padding: 15px;
border-radius: 5px;
color: #856404;
}
<!-- HTML ফাইলে -->
<link rel="stylesheet" href="style.css">
<div class="external-example">এটি এক্সটারনাল সিএসএস-এর মতো স্টাইল করা হয়েছে।</div>
উদাহরণ ৪: সিএসএস দিয়ে লেআউট (Flexbox)
ফ্লেক্সবক্স ব্যবহার করে উপাদানগুলোর লেআউট তৈরি করা যায়।
কোড:
<style>
.flex-container {
display: flex;
gap: 10px;
background-color: #dfe6e9;
padding: 10px;
}
.flex-item {
background-color: #2d3436;
color: white;
padding: 10px;
text-align: center;
flex: 1;
}
</style>
<div class="flex-container">
<div class="flex-item">আইটেম ১</div>
<div class="flex-item">আইটেম ২</div>
<div class="flex-item">আইটেম ৩</div>
</div>
৪. সিএসএস ব্যবহারের টিপস
- ইনলাইন সিএসএস শুধু ছোট প্রজেক্টে ব্যবহার করুন।
- এক্সটারনাল সিএসএস বড় প্রজেক্টের জন্য সুবিধাজনক কারণ এটি পুনঃব্যবহারযোগ্য।
- ক্লাস (
.class) এবং আইডি (#id) ব্যবহার করে নির্দিষ্ট উপাদান স্টাইল করুন। - ফ্লেক্সবক্স বা গ্রিড ব্যবহার করে আধুনিক লেআউট তৈরি করুন।
- কনট্রাস্ট এবং পঠনযোগ্যতা নিশ্চিত করুন।
