CSS কি? এটা কি কাজে লাগে CSS দিয়ে কি করে। ওয়েব ডেভলপমেন্ট

CSS কি ?

CSS এর মানে হলো Cascading Style Sheets. HTML ট্যাগ সমূহের behavior পরিবর্তন করতে ব্যবহার করা হয়। অর্থাৎ সহজেই HTML কে মনের মত সাজাতে CSS ব্যবহার করা হয়। CSS দিয়ে ডিফল্ট কালার সেট করা যায়, ক্লাস তৈরি করা যায় এছাড়াও ট্রানজিশন এবং অ্যানিমেশন তৈরি করা যায়।

CSS কি বলার আগে বলে নেই CSS শিখতে গেলে আপনাকে আগে কি কি জানতে হবে । CSS শিখতে গেলে আপনাকে অবশ্যই HTML অথবা XHTML এর বেসিক ধারনা রাখতে হবে । এগুলোর সব একটির সাথে আরেকটির গভীরভাবে সম্পর্ক রয়েছে । তাই ধারাবাহিকভাবে বা শিখলে আপনি কিছুই জানতে পারবেন না । আগে আমি তাই সব প্রাথমিকভাবে ধারনা দিব যে ওয়েবডিজাইনার হতে গেলে আপনাকে কি কি জানা লাগবে । তারপর বিস্তারিতভাবে শুরু করবো ।

CSS এর পূর্ণরুপ Cascading Style Sheets । তার মানে CSS এ আপনাকে স্টাইল শিটের মাধ্যমে ওয়েবডিজাইন করতে হবে । এটা নির্দেশ করে HTML elements কিভাবে বিন্যাস করা হবে । স্টাইল শিট নতুন করে HTML 4.0 যোগ করে ডিজাইনের বিভিন্ন ত্রুটিগুলো দূর করে । এক্সটার্নাল স্টাইল শিট গুলো CSS files এর ভিতর জমা থাকে । এই এক্সটার্নাল স্টাইল শিট অনেক কাজ একসাথে করে থাকে । তাই এই এক্সটার্নাল স্টাইল শিটের গুরুত্ব অপরিসীম ।

CSS ডেমো কেমন?
CSS কি জিনিস তাতো বুঝলাম, এবার আসুন দেখি CSS এর ডেমোটা কেমন হয়ঃ

/* Stylesheet 1: */

body {

font: 100% Lucida Sans; margin: 20px; line-height: 26px;

}

.container {

min-width: 900px;.    

}

.wrapper { position: relative; overflow: auto; }

#top, #sidebar, #bottom, .menuitem { border-radius: 4px; margin: 4px; }

#top { background-color: #84c754; color: #ffffff; padding: 15px; }

#menubar { width: 200px; float: left } #main { padding: 10px; margin: 0 210px; }

#sidebar { background-color: #32a4e7; color: #ffffff; padding: 10px; width: 180px; bottom: 0; top: 0; right: 0; position: absolute; }

#bottom { border: 1px solid #d4d4d4; background-color: #f1f1f1; text-align: center; padding: 10px; font-size: 70%; line-height: 14px; }

#top h1, #top p, #menulist { margin: 0; padding: 0; } .menuitem { background-color: #f1f1f1; border: 1px solid #d4d4d4; list-style-type: none; padding: 2px; cursor: pointer; } .menuitem:hover { background-color: #ffffff; } a { color: #000000; text-decoration: underline; } a:hover { text-decoration: none; }

এরকম স্টাইলশিট দেখলেই তাহলে আমরা বুঝতে পারবো যে এটা CSS এ কোডিং করা হয়েছে ।

CSS নকশা লেআউট

তোমার ওয়েবপেজের নকশা (layout) পরিবর্তন করার জন্য সিএসএসের বিভিন্ন বৈশিষ্ট্য (property) যেমন অবস্থান (position) এবং ফ্লোট (float) ইত্যাদির সাথে কিভাবে এইচটিএমএল স্প্যান (span) এবং div উপাদানগুলো (element) যুক্ত করতে হবে তা শেখ।

এটা একটা হেডিং ট্যাগ

এটা একটা প্যারাগ্রাফ ।

এভাবে আমরা সাধারণত একটা ডকুমেন্ট লিখে থাকি । এর ভিতর যদি আলাদা আলাদা কালার এবং ফন্ট পরিবর্তন করতে চাই, তাহলে প্রত্যেকটির জন্য আলাদা আলাদা ট্যাগ এবং কালার এলিমেন্ট যুক্ত করতে হবে । যা একটা ডকুমেন্ট লেখার জন্য সম্ভব । কিন্তু যদি আমরা বড় একটি ওয়েব পেজ লিখতে যায় তাহলে কি হবে একবার ভেবে দেখেছেন? কি মাথা ঘুরছে তাই নাহ? থাক আর মাথা ঘুরিয়ে কাজ নাই। আপনার এই মাথা ঘোরা দূর করতে আছে CSS । এটা একটা স্টাইলশিটের মাধ্যমেই একটা ওয়েবপেজের ডিজাইন করে দিতে পারে । তাহলে বুঝতেই পারছেন CSS এর গুরুত্ব ।।।।