যে ৭ টি পাওয়ারফুল টিপসে CSS এ গুরু হওয়া যাবে

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

PHP’র মতো CSS এর কোন error সিস্টেম নেই বলে ভুলটা কোথায় তা বুঝতে পারা আরেক মহা ঝামেলা। প্রত্যেক প্রোপার্টির কাজ না বুঝে খালি এটা ওটা চেঞ্জ করে এক্সপেরিমেন্ট করলেই CSS এ হতাশা জিনিসটা স্ট্রাইক করে বসবে।
যত হতাশাজনকই মনে হোক, এর কোন বিকল্প নেই। CSS ছাড়া ফ্রন্ট-এন্ড ডেভেলপারের মূল্যই নেই। তবে আশার কথা হলো, কোন মতে একবার এটি নিজের আয়ত্ত্বে আসলে আপনাকে আর কেউ ঠেকাতে পারবে না। প্রয়োজন শুধু একটানা লেগে থাকার মতো ধৈর্য্য এবং আগ্রহ।

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 এর ব্যবহার এবং পরস্পরের সম্পর্ক বুঝুন। লেআউট তৈরীর সময় সিএসএস float দিয়ে সবচেয়ে গুরত্বপূর্ন কাজটি করা হয়। এছাড়া লেখা আর ছবি একসাথে থাকলে সেখানে float ব্যবহার করা হয়। আর অন্যদিকে clear প্রোপার্টির কাজ হচ্ছে float floated এলিমেন্ট সরানো। left, right এবং both মানগুলি ব্যবহার করে বামে, ডানে অথবা উভয়দিকের floated এলিমেন্ট সরিয়ে ফেলা হয়। একটা floated এলিমেন্টের কোনদিকে floated এলিমেন্ট থাকবে আর কোনদিকে থাকবেনা এটা clear প্রোপার্টিজ দিয়ে ঠিক করা হয়।

৫. শুরুর দিকে অ্যানিমেশনের ক্ষেত্রে একসাথে সবকিছু animation প্রোপার্টিতে লেখার পরিবর্তে আগে প্রত্যেকটা অ্যানিমেশন প্রোপার্টি আলাদাভাবে লিখতে শিখুন। অর্থাৎ animation: my-animation 5s infinite; না লিখে animation-name, animation-duration এবং animation-iteration-count এ ভেঙ্গে ভেঙ্গে লিখুন। এতে করে কোনটা কেমন behave করে তা আরও পরিষ্কারভাবে বুঝতে পারবেন। অ্যানিমেশনের সাথে ট্রানজিশন গুলিয়ে ফেলবেন না। দুইটাকে আগে আলাদাভাবে শিখুন।

৬. HTML এ এক এর পর এক div যুক্ত করার বদভ্যাস আছে অনেকের, এটা পরিহার করুন। div কে শুধু wrapper হিসেবে ব্যাবহার করুন। অপ্রয়োজনীয় ট্যাগ মানেই বাড়তি ঝামেলা, এই দিকটা খেয়াল রাখুন।

৭. CSS এর ফান্ডামেন্টাল শিখেই তা দিয়ে একটা সাইট বানানোর মতো কাজ করতে যাবেন না। CSS-Tricks এবং কোডপেন এর মতো সাইট গুলোতে নিয়মিত ভিজিট করুন। বিভিন্ন মাইক্রো প্রজেক্টের মাধ্যমে নিজের ধারণাকে আরও উন্নত করুন।

মনে রাখবেন, দেখতে সোজা জিনিসই সবচেয়ে বেশি জটিলতার সৃষ্টি করে। এটা সার্বজনিন সত্য। একা একা শুধু নিজেকে দোষারোপ করা বোকামি। চালিয়ে যান এবং প্রচুর পরিমাণে প্রাকটিস করতে থাকুন। আপনাকে দিয়ে হবেই।