আগে থেকেই আপনার যা জানা উচিত
CSS শেখা শুরু করার আগে আপনার HTML/XHTML সম্পর্কে সাধারণ ধারণা থাকা উচিত।
CSS কি
* CSS বলতে বুঝায় ক্যাসকেডিং স্টাইল শিটস (Cascading Style Sheets)
* এই স্টাইল নির্ধারণ করে HTML উপাদানগুলো কেমনভাবে প্রদর্শিত হবে
* HTML 4.0 ভার্সনের সঙ্গে স্টাইল যোগ করা হয়েছিল একটি সমস্যা সমাধানের উপায় হিসেবে
* স্টাইল শিট বাড়তি পরিশ্রমের হাত থেকে রক্ষা করে
* CSS ফাইলের মধ্যে গোটা স্টাইলশিট সংরক্ষণ করা থাকে

স্টাইল একটি বড় সমস্যা সমাধান করেছিল
ডকুমেন্ট ফরম্যাটিং বা সজ্জার কাজে HTML এর সাথে কখনো ট্যাগ ব্যবহার করার পরিকল্পনা ছিল না। HTML কেবল ডকুমেন্টের বিষয়বস্তুকে নির্দেশ করার জন্য ব্যবহারের কথা ছিল। যেমন:

এটি একটি শিরোনাম

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

HTML 3.2 ভার্সনের সাথে যখন বিভিন্ন রকম ট্যাগ যেমন কিংবা color উপাদানগুলো ব্যবহার শুরু হলো, তখন ওয়েব ডেভলপারদের জন্য তা একপ্রকার দু:স্বপ্নে পরিণত হলো। বড় বড় ওয়েবসাইটের প্রতিটি পৃষ্ঠায় font এবং color উপাদানগুলো ব্যবহার করা অনেক কষ্টদায়ক ও সময়সাপেক্ষ হয়ে উঠল।
আর এই সমস্যা সমাধানের লক্ষ্যে ওয়ার্ল্ড ওয়াইড ওয়েব কনসোর্টিয়াম (W3C) প্রণয়ন করে CSS.
HTML 4.0 ভার্সন থেকেই সকল HTML ডকুমেন্ট থেকে পৃথক ফরম্যাটিং বাদ দেয়া সম্ভব হল। পরিবর্তে একটি আলাদা CSS ফাইলে ফরম্যাটিং নির্দেশনা সংরক্ষণের ব্যবস্থা করা হলো।
--------------------------------------------------------------------------------

CSS বাক্যরীতি (Syntax)

একটি CSS সেট একটি সিলেক্টর (selector) এবং একটি ডিক্লেয়ারেশন (declaration) ব্লক দ্বারা গঠিত:

CSS সিলেক্টর
সিলেক্টর নির্দেশ করে দেয় আপনি HTML উপাদানগুলোকে কিভাবে সাজাবেন।
ডিক্লেয়ারেশন ব্লকে এক কিংবা একাধিক ডিক্লেয়ারেশন সেমিকোলন দ্বারা পৃথক করা হয়। প্রতিটি ডিক্লেয়ারেশনে একটি প্রোপার্টির (property) নাম এবং তার মান (value) কোলন (:) দ্বারা আলাদা করা থাকে।

CSS উদাহরণ
একটি CSS ডিক্লেয়ারেশন সবসময় সেমিকোলনের মাধ্যমে শেষ হয়। ডিক্লেয়ারেশন গ্রুপটি দ্বিতীয় বন্ধনী "{}" দ্বারা ঘেরা থাকে। যেমন:
p {color:red;text-align:center;}

তবে CSS কোডকে সহজে পঠন ও উপলব্ধির জন্য ডিক্লেয়ারেশনগুলো আলাদা লাইনে দেয়া যেতে পারে:
যেমন

p {
color: red;
text-align: center;
}

লেখকঃ মোস্তাফিজুর ফিরোজ ।

তাই ওয়েবডিজাইনের জন্য 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 এর আরো বিস্তারিত নিয়ে হাজির হবো । তাই আমাদের সাথেই থাকুন ।