একটা ওয়েবসাইট তৈরিতে ডিজাইনের ক্ষেত্রে সব থেকে বেশী যে সিনট্যাক্সটি কাজ করে, সেটি হচ্ছে CSS । এইচটিএমল ডকুমেন্টের যেকোন এলিমেন্টকে স্টাইলিং বা একটা রুপ দিতে সিএসএস ব্যবহার হয়। CSS এমন একটা জিনিস যেখানে শুধু একটা বাড়তি কিংবা ভুল প্রোপার্টি আপনার কয়েকশ লাইনের স্টাইলকে অকেজো করে দিতে পারে। HTML কিংবা PHP’র মতো কোন এরর সিস্টেম নেই বলে ভুলটা কোথায় তা বুঝতে পারা আরেক মহা ঝামেলা। প্রত্যেক প্রোপার্টির কাজ না বুঝে খালি এটা ওটা চেঞ্জ করে এক্সপেরিমেন্ট করলেই CSS এ হতাশা জিনিসটা স্ট্রাইক করে বসবে।
যত হতাশাজনকই মনে হোক, এর কোন বিকল্প নেই। CSS ছাড়া ফ্রন্ট-এন্ড ডেভেলপারের মূল্যই নেই। তবে আশার কথা হলো, কোন মতে একবার এটি নিজের আয়ত্ত্বে আসলে আপনাকে আর কেউ ঠেকাতে পারবে না। প্রয়োজন শুধু একটানা লেগে থাকার মতো ধৈর্য্য এবং আগ্রহ।
হতাশা দূর করার মতো দু’একটা পরামর্শ:
প্রথমেই আসুন নতুন করে একবার CSS এর পূর্ণরূপটা জানি, CSS – Cascading Style Sheet । Style Sheet না হয় বুঝলেন, কিন্তু Cascading কি? এটা এমনি এমনি কিন্তু এর নামের সাথে যুক্ত হয়নি।
Cascade শব্দের সাধারণ অর্থ উপর থেকে নিচের দিকে প্রবাহিত হওয়া। প্যারেন্ট এলিমেন্ট এর স্টাইল এর চাইল্ড এলিমেন্টের উপর প্রভাব ফেলে, এই ধর্মের জন্যই এর নাম হয়েছে Cascading Style Sheet. অর্থাৎ, আপনি আপনার HTML ফাইলের প্যারেন্ট এলিমেন্টগুলোকে যে স্টাইল দেবেন, তার দারুণ একটা প্রভাব বিস্তার করবে চাইল্ড এলিমেন্টের উপর। চাইল্ড এবং পেরেন্টের সম্পর্ক বুঝলে এবং প্রয়োজনে কিভাবে চাইল্ড পেরেন্টকে ওভাররাইড করে সেটা জানা থাকলে height, width, margin, padding সম্পর্কিত বেশিরভাগ ঝামেলারই অবসান ঘটবে।
এরপর আরেকটা ভয়ঙ্কর CSS প্রোপার্টি হলো position! এই জিনিসটা প্রত্যেক বিগিনারই কোনো না কোনো সময় ভুলভাবে ব্যবহার করবেই। relative, absolute এর মানে বুঝুন ভালো করে, এর সাথে top, left, bottom, right এর সম্পর্ক কি তাও দেখে নিন।
পেরেন্ট এলিমেন্ট ক্লাসে লিখে দিলেন display: inline, এখানে inline কি সেই প্রশ্ন আসলে তার যথার্থ উত্তর দিতে জানতে হবে। সব display টাইপেরই আলাদা বৈশিষ্ট্য আছে, এর মাঝে আবার flex, grid কিংবা table এর ব্যাবহার অনেক বিস্তৃত।
float: left এবং clear: both এর ব্যাবহার এবং পরস্পরের সম্পর্ক বুঝুন।
শুরুর দিকে অ্যানিমেশনের ক্ষেত্রে একসাথে সবকিছু animation প্রোপার্টিতে লেখার পরিবর্তে আগে প্রত্যেকটা অ্যানিমেশন প্রোপার্টি আলাদাভাবে লিখতে শিখুন। অর্থাৎ animation: my-animation 5s infinite; না লিখে animation-name, animation-duration এবং animation-iteration-count এ ভেঙ্গে ভেঙ্গে লিখুন, এতে করে কোনটা কেমন behave করে তা আরও পরিষ্কারভাবে বুঝতে পারবেন। অ্যানিমেশনের সাথে ট্রানজিশন গুলিয়ে ফেলবেন না, দুইটাকে আগে আলাদাভাবে শিখুন।
HTML এ এক এর পর এক div যুক্ত করার বদভ্যাস আছে অনেকের, এটা পরিহার করুন। div কে শুধু wrapper হিসেবে ব্যাবহার করুন। অপ্রয়োজনীয় ট্যাগ মানেই বাড়তি ঝামেলা, এই দিকটা খেয়াল রাখুন।
CSS এর ফান্ডামেন্টাল শিখেই তা দিয়ে একটা সাইট বানানোর মতো কাজ করতে যাবেন না। CSS-Tricks, কোডপেন এর মতো সাইট গুলোতে নিয়মিত ভিজিট করুন। বিভিন্ন মাইক্রো প্রজেক্টের মাধ্যমে নিজের ধারণাকে আরও উন্নত করুন।
মনে রাখবেন, দেখতে সোজা জিনিসই সবচেয়ে বেশি জটিলতার সৃষ্টি করে। এটা সার্বজনিন সত্য, একা একা শুধু নিজেকে দোষারোপ করা বোকামি। চালিয়ে যান, আপনাকে দিয়ে হবেই।