লেখকঃ মোস্তাফিজুর ফিরোজ ।
তাই ওয়েবডিজাইনের জন্য CSS কিন্তু অনেক গুরুত্বপুর্ণ । আজ আপনাদের সাথে ওয়েবডিজাইনের অনেক গুরুত্বপুর্ণ ভাষা 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 ফাইল কিভাবে থাকে?
CSS ফাইল এক্সটার্নাল .css এক্সটেনশন আকারে থাকে । এর ভিতর স্টাইলগুলো লেখা থাকে । যা ওয়েবসাইটের সকল পেজের appearance এবং layout এর ডিজাইন উল্লেখ করা থাকে । তাই এই একটি ফাইল এডিট করেই আপনি ওয়েব ডিজাইন করতে সমর্থ হবেন ।
CSS এর গুরুত্ব?
CSS কি এবং এটা কেমন তা জানলাম । এবার আমরা জানবো কিভাবে CSS দ্বারা বড় বড় সমস্যা দূর করা হয় এবং এর গুরুত্ব সম্পর্কে জানবো ।
আমরা তো আগের পর্বে দেখিয়েছিলাম HTML দ্বারা কিভাবে একটা ডকুমেন্টের ফরমেট করা হয় । তারপরও উদাহরণটা আমি আরেকবার দেখাচ্ছি ।
এটা একটা হেডিং ট্যাগ
এটা একটা প্যারাগ্রাফ ।
এভাবে আমরা সাধারণত একটা ডকুমেন্ট লিখে থাকি । এর ভিতর যদি আলাদা আলাদা কালার এবং ফন্ট পরিবর্তন করতে চাই, তাহলে প্রত্যেকটির জন্য আলাদা আলাদা ট্যাগ এবং কালার এলিমেন্ট যুক্ত করতে হবে । যা একটা ডকুমেন্ট লেখার জন্য সম্ভব । কিন্তু যদি আমরা বড় একটি ওয়েব পেজ লিখতে যায় তাহলে কি হবে একবার ভেবে দেখেছেন? কি মাথা ঘুরছে তাই নাহ? থাক আর মাথা ঘুরিয়ে কাজ নাই। আপনার এই মাথা ঘোরা দূর করতে আছে CSS । এটা একটা স্টাইলশিটের মাধ্যমেই একটা ওয়েবপেজের ডিজাইন করে দিতে পারে । তাহলে বুঝতেই পারছেন CSS এর গুরুত্ব ।
CSS এর আরেকটা গুরুত্ব হলো এটা HTML elements কিভাবে দেখাবে তা নির্দেশ করে থাকে । তাই HTML এর বিন্যাস খুব সহজেই করা যায় ।
তাহলে আশাকরি CSS সম্পর্কে আপনাদের বেসিক একটা ধারনা হলো । আর না বুঝতে পারলে কমেন্ট করতে কিন্তু ভুলবেন না । পরের পর্বে আমরা CSS এর আরো বিস্তারিত নিয়ে হাজির হবো । তাই আমাদের সাথেই থাকুন ।
