CSS কী?
CSS (Cascading Style Sheets) হল এমন একটি ভাষা যা দিয়ে আমরা আমাদের ওয়েব পেইজের ডিজাইন, কালার, ফন্ট এবং লেআউট পরিবর্তন
করতে পারি। যখন আমরা একটি ওয়েব পেইজ তৈরি করি, তখন মূলত HTML দিয়ে কন্টেন্ট তৈরি করি, কিন্তু সেই কন্টেন্ট সুন্দর এবং আকর্ষণীয় দেখানোর জন্য আমরা
CSS ব্যবহার করি।
যেমন, HTML দিয়ে আমরা একটি সাদা পাতা তৈরি করি, কিন্তু CSS দিয়ে সেই পাতায় কালার, ডিজাইন, ফন্ট স্টাইল, টেক্সটের আকার - সবকিছু পরিবর্তন করতে পারি।
CSS এর প্রধান কাজ কী?
- কালার ও ডিজাইন
পরিবর্তন: CSS দিয়ে ওয়েব পেইজের ব্যাকগ্রাউন্ড, টেক্সটের কালার, লেআউট নিয়ন্ত্রণ করতে পারি।
- ফন্ট পরিবর্তন: CSS দিয়ে টেক্সটের ফন্ট, সাইজ, ও হাইট পরিবর্তন করা যায়।
- ইলিমেন্ট সাজানো: ওয়েব পেইজের বিভিন্ন ইলিমেন্ট যেমন টেক্সট, ছবি, বাটন - এসকলকে একে অপর থেকে পৃথকভাবে সাজাতে CSS ব্যবহার হয়।
উদাহরণ:
এখানে একটি ছোট
উদাহরণ দেয়া হলো যেখানে HTML কোড এবং CSS কোড ব্যবহার করে একটি ওয়েব পেইজ সাজানো হয়েছে।
<html>
<head>
<style>
/* এই অংশটি CSS */
body {
background-color: lightblue; /* ব্যাকগ্রাউন্ডের কালার পরিবর্তন */
color: darkblue; /* টেক্সটের কালার পরিবর্তন */
font-family: Arial, sans-serif; /* ফন্ট পরিবর্তন */
}
h1 {
font-size: 36px; /* হ্যাডিং এর আকার পরিবর্তন */
}
p {
font-size: 18px; /* প্যারাগ্রাফের আকার পরিবর্তন */
}
</style>
</head>
<body>
<h1>আমার প্রথম ওয়েব পেইজ!</h1>
<p>এটা CSS দিয়ে সাজানো হয়েছে।</p>
</body>
</html>
উদাহরণ
বিশ্লেষণ?
- ব্যাকগ্রাউন্ড কালার: এই কোডের মাধ্যমে ওয়েব পেইজের ব্যাকগ্রাউন্ড কালার lightblue করা হয়েছে।
- টেক্সটের কালার: পেইজের সব লেখা (যেমন হ্যাডিং বা শিরোনাম এবং প্যারাগ্রাফ) এর কালার পরিবর্তন হয়েছে darkblue।
- ফন্ট ফ্যামিলি: Arial নামক ফন্ট ব্যবহার করা হয়েছে
আজকের বাড়ির
কাজ:
❓ পছন্দের কালার
দিয়ে ব্যাকগ্রাউন্ড পরিবর্তন করো। ( যেমনঃ pink, orange, green)
❓ টেক্সটের সাইজ
পরিবর্তন করো। (যেমনঃ 24px, 1.5em, 5vw, 10rem)
❓ px, em, rem, vw দ্বারা
কি বুঝায় এবং এদের মধ্যকার প্রার্থক্য বের কর।
❓ নিজের থেকে আইডিয়া নিয়ে
একটি ওয়েবসাইট তৈরি কর?
বাড়ির
কাজগুলো শেষ করে কমেন্ট বক্সে জানিয়ে দাও।
নোট:
📌 CSS কোড সবসময় <style></style> ট্যাগের মধ্যে
থাকতে হয়,
যেটা সাধারণত <head> ট্যাগের ভিতরে থাকে।
📌 তুমি যে কোনো
ট্যাগের স্টাইল সহজে পরিবর্তন করতে পারো, যেমন body, h1, p, div, ইত্যাদি।
আজকে এই পর্যন্ত, আগামীকাল CSS এর আরও নতুন কিছু শিখবো! সেই পর্যন্ত ভালো থাকবে এবং অবশ্যই অনুশীলন করবে। Happy Coding 🎉