CSS Cascading Style Sheets এর গুরু করার ৭ টি ফর্রমূলা PHP (Hypertext Pre-processor) এর মতো CSS Cascading Style Sheets এর কোন error সিস্টেম নেই বলে ভুলটা কোথায় তা বুঝতে পারা আর একটা মহা ঝামেলা।
প্রত্যেক প্রোপার্টির কাজ না বুঝে খালি এটা ওটা চেঞ্জ করে এক্সপেরিমেন্ট করলেই CSS (Cascading Style Sheets) এ হতাশা জিনিসটা স্ট্রাইক করে বসবে।
একটা ওয়েবসাইট তৈরিতে ডিজাইনের ক্ষেত্রে সব থেকে বেশী যে সিনট্যাক্সটি কাজ করে, সেটি হচ্ছে CSS (Cascading Style Sheets)।
এইচ টি এম এল HTML (Hypertext Pre-processor) ডকুমেন্টের যে কোনো এলিমেন্টকে স্টাইলিং বা একটা রূপ দিতে সিএসএস ব্যবহার হয়।
CSS Cascading Style Sheets এমন একটা জিনিস যেখানে শুধু একটা বাড়তি কিংবা ভুল প্রোপার্টি আপনার কয়েকশ লাইনের স্টাইল কে অকেজো করে দিতে পারে।
PHP (Hypertext Pre-processor) এর মতো CSS (Cascading Style Sheets) এর কোন error সিস্টেম নেই বলে ভুলটা কোথায় তা বুঝতে পারা আর এক মহা ঝামেলা।
প্রত্যেক প্রোপার্টির কাজ না বুঝে খালি এটা ওটা চেঞ্জ করে এক্সপেরিমেন্ট করলেই CSS Cascading Style Sheets এর হতাশা জিনিসটা স্ট্রাইক করে থাকবে।
যত হতাশা জনকই মনে হোক না কেন, এর কোনো বিকল্প নেই। CSS (Cascading Style Sheets) ছাড়া ফ্রন্ট-এন্ড ডেভেলপারের মূল্যই নেই।
তবে আশার কথা হলো, কোন মতে একবার এটি নিজের আয়ত্ত্বে আসলে আপনাকে আর কেউ ঠেকাতে পারবে না।
প্রয়োজন শুধু একটানা লেগে থাকার মতো ধৈর্য্য এবং আগ্রহ থাকতে হবে।
CSS (Cascading Style Sheets) এ হতাশা এবং ভয় দূর করার জন্য আজ পাঠকদের জন্য থাকছে দুর্দান্ত ৭ ফর্রমূলা।
আপনার কাজ হচ্ছে টিপস গুলো অনুসরণ করা এবং সেই অনুয়ায়ি প্রাকটিস করা।
CSS (Cascading Style Sheets) এ ভালো করার ৭ ফর্রমূলা:
১. প্রথমেই আসুন নতুন করে একবার CSS এর পূর্ণরূপটা জানি। CSS – Cascading Style Sheet। Style Sheet না হয় বুঝলেন, কিন্তু Cascading কি?
এটা কি কখনো হিসেব করছেন? এটা এমনি এমনি কিন্তু এর নামের সাথে যুক্ত হয়নি।
Cascade শব্দের সাধারণ অর্থ উপর থেকে নিচের দিকে প্রবাহিত হওয়া। প্যারেন্ট এলিমেন্ট এর স্টাইল এর চাইল্ড এলিমেন্টের উপর প্রভাব ফেলবে।
এই ধর্মের জন্যই এর নাম হয়েছে Cascading Style Sheet. অর্থাৎ, আপনি আপনার HTML (Hypertext Pre-processor) ফাইলের প্যারেন্ট এলিমেন্ট গুলোকে যে স্টাইল দেওয়া হবে।
তার দারুণ একটা প্রভাব বিস্তার করবে চাইল্ড এলিমেন্টের উপর।
চাইল্ড এবং পেরেন্টের সম্পর্ক বুঝলে এবং প্রয়োজনে কিভাবে চাইল্ড পেরেন্টকে ওভাররাইট করে সেটা জানা থাকলে height, width, margin, padding সম্পর্কিত বেশি ভাগ সমস্যার অবসান ঘটবে।
২. এরপর আর একটা ভয়ঙ্কর CSS (Cascading Style Sheets) প্রোপার্টি হলো position! এই জিনিসটা প্রত্যেক বিগিনারই কোনো না কোনো সময় ভুল ভাবে ব্যবহার করবে।
relative, absolute এর মানে বুঝুন ভালো করে, এর সাথে top, left, bottom, right এর সম্পর্ক কি তাও দেখে নেয়া দরকার।
আড়ো পড়ুন: All HTML Tags লিস্ট বাংলা।
আড়ো পড়ুন: লক্ষ্য যদি থাকে ওয়েব ডিজাইন শেখার, তবে জানতে হবে যে গুলো।
Cascading Style Sheets
৩. পেরেন্ট এলিমেন্ট ক্লাসে লিখে দিলে 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 (Hypertext Pre-processor) এর এক এর পর div যুক্ত করার বদভ্যাস আছে অনেকের, এটা পরিহার করুন।
div কে শুধু wrapper হিসেবে ব্যাবহার করুন। অপ্রয়োজনীয় ট্যাগ, মানেই বাড়তি ঝামেলা, এই দিকটা খেয়াল রাকতে হবে।
৭. CSS এর ফান্ডামেন্টাল শিখেই তা দিয়ে একটা সাইট বানানোর মতো কাজ করতে যাবেন না।
CSS-Tricks এবং কোডপেন এর মতো সাইট গুলোতে নিয়মিত ভিজিট করুন। বিভিন্ন মাইক্রো প্রজেক্টের মাধ্যমে নিজের ধারণা কে আরও উন্নত করুন।
মনে রাখবেন, দেখতে সোজা জিনিসই সবচেয়ে বেশি জটিলতার সৃষ্টি করে। এটা সার্বজনিন সত্য। একা একা শুধু নিজেকে দোষারোপ করা ভুল।
কাজ চালিয়ে যান এবং প্রচুর পরিমাণে প্রাকটিস করতে থাকুন। কাজে সফলতা হবেই।
ধন্যবাদ।