সিএসএস টিউটোরিয়ালঃ ১ম পর্ব(পরিচিতি)

This entry is part 7 of 13 in the series সিএসএস

CSS কি এবং কেন?

CSS এর পূর্ন নাম বা রূপ হচ্ছে Cascading Style Sheets. সহজ ভাষায় একটি ওয়েবসাইটের বিভিন্ন কনটেন্ট (এইচটিএমএল ইলিমেন্ট) যেমনঃ সাইটের গঠন, আকার(দৈর্ঘ্য, প্রস্থ এবং উচ্চতা), কনটেন্ট এর অবস্থান, ছবি, রং, ভিডিও, এ্যানিমেশন, বাটন কিভাবে ওয়েব ব্রাউজারে প্রদর্শন করবে এটার নির্দেশনা দান করাই হচ্ছে CSS এর কাজ। এইচটিএমএল কে যদি একটি ওয়েবসাইটের মেরুদণ্ড (Structure) বলেন তাহলে সিএসএস হল প্রান।

CSS কিভাবে কাজ করে?

CSS নিয়ে কাজ করতে হলে আপনাকে প্রথমে এইচটিএমএল এ ভাল দক্ষতা থাকতেই হবে। তা নাহলে শুধু সিএসএস দিয়ে আপনি কিছুই করতে পারবেন না। তাই, সিএসএস শিখার আগে অবশ্যই এইচটিএমএল শিখে নিতে হবে। সিএসএস মূলত এইচটিএমএল সাথে জয়েন ভেঞ্চারে/কম্বিনেশনে কাজ করে। সাপোজ মনে করেন, এইচটিএমএল ফাইল এ একটি পারাগ্রাফ লিখেছেন। এখন আপনি চাইছেন সেই পারাগ্রাফ লিখার কালার লাল রঙের করবেন। তাহলে আপনাকে যা করতে হবে সেটা নিচের উদাহরনে লক্ষ করুনঃ

[html]<html>
<head>
<style type=”text/css”>
p{
color: red;
}
</style>
</head>

<body>
<p>This is a paragraph. Which color is RED!</p>
</body>
</html>[/html]

Note: উপরের কোড গুলো ফলো করুন… হেড((<head> </head>)সেকশনে internal style sheet (বিভিন্ন টাইপ এর স্টাইল সীট নিয়ে পরের অধ্যায়ে জানবো) এর style ট্যাগের ভিতরে আমরা পারাগ্রাফ জন্য লাল কালার ডিক্লেয়ার করেছি। আর বডি(<body> </body >) সেকশনে প্যারাগ্রাফ ট্যাগ (<p></p>) এর ভিতরে প্যারাগ্রাফ টেক্সট ডিক্লেয়ার করেছি। উপরের কোড টুকুর আউটপুট ব্রাউজার এ প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু নিজ হাতে লিখুন, ভুলেও কপি-পেস্ট করবেন না। ফাইলের নাম দিন index বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন। এবার ডাবল ক্লিক করে ব্রাউজারে ওপেন করুন। সব কিছু ঠিক থাকলে নিচের মত প্রদর্শন করবে…

পরবর্তি পর্বে আসছে সিনট্যাক্স পরিচিতি। সেই পর্যন্ত সবাই ভাল থাকুন সুস্থ থাকুন!