বাংলায় শিখুন Css

ফ্রেন্ডস, আশা করি সকলেই ভালো আছেন। তো আজকে থেকে আমরা সিএসএস টিউটোরিয়াল শুরু করতে যাচ্ছি। যারা সিএসএস আগে শিখেন নাই তারা এখন থেকে সিএসএস এর বেসিক বিষয়গুলি শিখতে পারবেন। তো আজকের টিউটোরিয়াল এ বেশি গভীরে যাওয়া হবে না, জাস্ট বেসিক বিষয়গুলি নিয়ে আলোচনা করা হবে। তাহলে চলুন শুরু করা যাক।

সিএসএস কি?

সিএসএস মূলত একটি প্রোগ্রামিং ভাষা যেটা এইচটিএমএল কে ডিজাইন করার জন্য তৈরি করা হয়েছে। সিএসএস এর পূর্ণ নাম হলো Cascading Style Sheets । সিএসএস এটা ডিসাইড করে যে HTML এর এলিমেন্ট গুলো কিভাবে প্রদর্শিত হবে। নিচের ছবিতে আপনারা দেখতে পারবেন আমরা সিএসএস দিয়ে একই ওয়েবপেজ বিভিন্ন ভাবে প্রদর্শিত করতে পারি।

সিএসএস এর উদাহরণ

নিচে আপনারা যে কোডটি দেখতে পাচ্ছেন সেটা একটি নরমাল সিএসএস কোড যেটা দিয়ে body, h1 এবং p ট্যাগ ডিজাইন করা হয়েছে।
body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; }

সিএসএস এর স্ট্রাকচার

কোনো সিএসএস কোড শুরু হয় সিলেক্টর দিয়ে। সিলেক্টর এটা ডিসাইড করে যে কোন ট্যাগ টি ডিজাইন করা হবে। সিলেক্টর এর পর দুটি ক্লোজ সেকেন্ড ব্রাকেড এর মধ্যে এর সকল ডিক্লিয়ারেশন লেখা হয়। আবার প্রতিটি ডিক্লিয়ারেশন গঠিত হয় একটি প্রপার্টি এবং ভ্যালু নিয়ে। প্রতিটি প্রপার্টি এর পর ক্লোন দিয়ে ভ্যালু লিখে তার পর সেমিক্লোন দিয়ে ক্লোজ করতে হয়। যেমন নিচের কোড এ একটি সিএসএস কোড এর স্ট্রাকচার দেখুন।
p { color: red; text-align: center; }
এখানে p হলো একটি সিলেক্টর। আমরা যে HTML কোড এ এই সিএসএস ইউজ করবো সেই কোড এর

ট্যাগ ডিজাইন করার জন্য p সিলেক্টর নেওয়া হয়েছে। এভাবে আপনি যে ট্যাগ ডিজাইন করতে চান সেই ট্যাগ এর সিলেক্টর নিতে হবে। এখানে color একটি প্রপার্টি এবং red এই প্রপার্টির ভ্যালু। আর color: red; পুরোটাই একটি ডিক্লিয়ারেশন। এটাকে p ট্যাগ এর কন্টেন্ট এর কালার সবুজ করার জন্য ব্যবহার করা হয়েছে। এখানে text-align একটি প্রপার্টি এবং center এই প্রপার্টির ভ্যালু। আর text-align: center; পুরোটাই একটি ডিক্লিয়ারেশন। এটাকে p ট্যাগ এর কন্টেন্ট এর পজিশন সেন্টার করার জন্য ব্যবহার করা হয়েছে।

সিএসএস কিভাবে ব্যবহার করতে হয়

ওয়েবপেজে সিএসএস তিন ভাবে ব্যবহার করা যায়

ইন্টারনাল সিএসএস

এক্সটার্নাল সিএসএস

ইনলাইন সিএসএস

ইন্টারনাল সিএসএস

ইন্টারনাল সিএসএস এর ক্ষেত্রে HTML ডকুমেন্ট এর মধ্যে

এক্সটার্নাল সিএসএস

এক্সটার্নাল সিএসএস এর ক্ষেত্রে একটি সিএসএস ফাইল তৈরি করে সেটাকে HTML ডকুমেন্ট এর সাথে লিঙ্ক করে দেওয়া হয়। এর জন্য আপনি HTML ডকুমেন্ট এর হেড ট্যাগ এ নিচের কোড এর মত করে সিএসএস লিঙ্ক করে দিতে পারেন।
<link rel="stylesheet" type="text/css" href="style.css" />

ইনলাইন সিএসএস

ইনলাইন সিএসএস এর ক্ষেত্রে HTML ট্যাগ এর মধ্যেই স্টাইল এট্রিবিউট দিয়ে তার মধ্যে সিএসএস লেখা হয়। যেমন নিচের কোড এ দেখুন হেডিং ট্যাগ ডিজাইন করা হয়েছে।
<p style="color: red; padding:5px; text-align:center;">Hello World!</p>
তো বন্ধুরা এই ছিলো আজকের আর্টিকেল। আগামী আর্টিকেল এর সিএসএস এর সকল প্রকার সিলেক্টর নিয়ে আলোচনা করা হবে। ততক্ষণ সাইটের সাথেই থাকুন। আর টিপস এবং ট্রিকস বিষয়ে আর্টিকেল পেতে আমাদের মেইন ওয়েবসাইট ভিজিট করুন।