CSS ব্যবহার করে কোড লেখার আগে আপনাকে যে প্রথম বিষয়টি মাস্টার করতে হবে সেটি হলো সিনট্যাক্স (Syntax)। syntax শব্দটি শোনাতে ভয়াঙ্কর লাগতে পারে, কিন্তু এটি কেবল CSS-এ কোড লেখার জন্য আমরা যে নিয়মগুলো ব্যবহার করি সেগুলিকে বোঝায়। এই নিয়মগুলো স্ট্যান্ডার্ড, যা অন্যের কোড পড়াকে সহজ করে তোলে।
CSS স্টাইল রুলস (Style Rules)
CSS-এ একটি স্টাইলশীট नियमের একটি সেট সংরক্ষণ করে যা নির্ধারণ করে একটি ওয়েবসাইট ব্যবহারকারীর স্ক্রিনে কীভাবে দেখাবে। উদাহরণস্বরূপ, একটি স্টাইলশীট একটি ওয়েব পেজের টেক্সটের রঙ বা একটি নির্দিষ্ট হেডার দ্বারা ব্যবহৃত ফন্ট আকার রূপরেখা করতে পারে।
এই নিয়মগুলো একটি স্ট্যান্ডার্ড কাঠামো অনুসরণ করে, যা দুটি অংশ নিয়ে গঠিত: সিলেক্টর (selectors) এবং ডিক্লারেশন (declarations)। সমগ্রভাবে, CSS-এ একটি স্টাইল রুল কীভাবে দেখায়:
h1 { color: blue; }এই নির্দিষ্ট স্টাইল একটি ওয়েব পেজের সকল <h1> এলিমেন্টের রঙ নীল সেট করে। এখন, আসুন এই স্টাইলটিকে এর দুটি উপাদানে ভাগ করি যাতে আমরা বিশ্লেষণ করতে পারি কীভাবে এটি কাজ করে।
CSS ডিক্লারেশন (Declarations)
একটি CSS স্টাইলের প্রথম অংশ হলো ডিক্লারেশন। Declaration হলো একটি নির্দিষ্ট স্টাইলের অন্য শব্দ যা আপনি একটি ওয়েব পেজের একটি এলিমেন্টে প্রয়োগ করতে চান।
একটি CSS স্টাইল রুলে কমপক্ষে একটি ডিক্লারেশন থাকতে হবে এবং আপনি যত ইচ্ছা তত ডিক্লারেশন যোগ করতে পারেন। সুতরাং, আপনি যদি একটি ওয়েব পেজের একটি বক্সের প্রস্থ এবং উচ্চতা 100px সেট করতে চান, এবং এর ব্যাকগ্রাউন্ড রঙ নীল সেট করতে চান, তবে আপনি একটি ডিক্লারেশনে এটি করতে পারেন।
ডিক্লারেশন দুটি অংশ নিয়ে গঠিত, যা নিচে দেওয়া হলো:
- Properties (প্রোপার্টি): যেসব স্টাইল প্রোপার্টি একটি এলিমেন্টে প্রযোজ্য হওয়া উচিত (যেমন: color, background-color, width, height)।
- Value (মান): এই অংশ ব্রাউজারকে বলে প্রোপার্টিটি কীভাবে প্রদর্শিত হবে (যেমন: একটি বক্সের রঙ "green" বা "red" সেট করা যায়)।
এখানে একটি CSS ডিক্লারেশনের সিনট্যাক্স দেওয়া হলো:
property: value;লক্ষ্য করুন আমাদের CSS প্রোপার্টি প্রথমে আসে, এবং তারপর একটি কোলন (:) দ্বারা পৃথক করা হয়। কোলনের পরে আমরা যে মানটি প্রোপার্টিতে অ্যাসাইন করতে চাই সেটি আসে।
প্রতিটি CSS ডিক্লারেশন একটি সেমিকোলন (;) দিয়ে শেষ হওয়া উচিত।
এখানে দুটি CSS ডিক্লারেশনের উদাহরণ দেওয়া হলো:
color: blue; font-size: 16px;প্রথম ডিক্লারেশন একটি HTML এলিমেন্টের ফন্ট রঙ "blue" সেট করে। দ্বিতীয় ডিক্লারেশন একটি একক এলিমেন্টের ফন্ট আকার "16px" সেট করে। এই দুটি সিলেক্টর একটি প্রোপার্টি নাম দিয়ে শুরু হয় এবং একটি কমা এবং আমরা যে মানটি প্রোপার্টিতে অ্যাসাইন করতে চাই সেটি অনুসরণ করে।
ডিক্লারেশনগুলি কার্লি ব্র্যাকেটের ভিতরে সংরক্ষিত থাকে।
CSS সিলেক্টর (Selectors)
গত भागে, আমরা আলোচনা করেছি ডিক্লারেশন কীভাবে একটি ওয়েব এলিমেন্টে স্টাইল প্রয়োগ করতে ব্যবহৃত হয়। কিন্তু ডিক্লারেশন CSS সিনট্যাক্সের শুধু একটি অংশ। অন্য অংশ হলো সিলেক্টর, যা ব্রাউজারকে বলে একটি নির্দিষ্ট সেট ডিক্লারেশন কোন এলিমেন্টে প্রযোজ্য হওয়া উচিত।
এখানে একটি CSS সিলেক্টরের সিনট্যাক্স দেওয়া হলো:
selector { // List of declarations }সিলেক্টর ব্রাউজারকে নির্দেশ করে যে কোন এলিমেন্ট(গুলো) একটি নির্দিষ্ট সেট স্টাইলের অধীন থাকবে। সুতরাং, উদাহরণস্বরূপ, যদি আমরা সকল <div> এলিমেন্টের প্রস্থ "500px" সেট করতে চাই, তবে আমরা নিচের রুল ব্যবহার করে এটি করতে পারি:
div { width: 500px; }এই কেসে div আমাদের সিলেক্টর এবং আমাদের CSS রুলের শুরুতে আসে। তারপর, আমরা আমাদের ডিক্লারেশনগুলিকে কার্লি ব্র্যাকেটের ভিতরে সংজ্ঞায়িত করি, আগে আলোচনা করা সিনট্যাক্স ব্যবহার করে। এই রুল একটি ওয়েব পেজের সকল <div> এলিমেন্টের প্রস্থ "500px" সেট করে।
আপনি যদি CSS সিলেক্টর সম্পর্কে আরও জানতে আগ্রহী হন, তবে আমাদের CSS সিলেক্টর ব্যাজার্নার গাইড পড়ুন।
সামনে, ডিক্লারেশন এবং সিলেক্টর মিলে একটি CSS স্টাইল রুল গঠন করে।
CSS কমেন্ট (Comments)
আমরা এখন পর্যন্ত CSS-এ স্টাইল রুল কীভাবে লিখতে হয় তা আলোচনা করেছি। যাইহোক, একটি স্টাইলশীটে লেখা সব টেক্সট স্টাইল রুল নয়।
CSS স্টাইলশীটগুলো কমেন্ট সংরক্ষণ করার সক্ষম। কমেন্ট হলো একজন ডেভেলপার দ্বারা লেখা টেক্সটের ব্লক যার উদ্দেশ্য একটি স্টাইলশীটের কোড বোঝাকে সহজ করা। কমেন্ট ব্রাউজার দ্বারা উপেক্ষা করা হয়, তাই আপনি একটি স্টাইলশীটে যত ইচ্ছা তত কমেন্ট যোগ করতে পারেন।
কমেন্ট লেখার একাধিক সুবিধা রয়েছে।
প্রথম, কমেন্ট লেখা আপনাকে কোড লিখার সময় আপনার কোড ট্র্যাক রাখতে দেয়, এবং ভবিষ্যতে কোডের কোনো ব্লক বোঝার জন্য আপনার চিন্তার একটি রেকর্ড দেয়। দ্বিতীয়, কমেন্ট লেখা সেই ডেভেলপারদের সহায়তা করে যারা কোডের একটি ব্লক লেখেনি সেটির উদ্দেশ্য এবং কোড লেখার পেছনে আপনার অভিপ্রায় বোঝার জন্য।
CSS কমেন্ট /* সিনট্যাক্স দিয়ে শুরু হয় এবং */ সিনট্যাক্স দিয়ে শেষ হয়।
সিঙ্গল-লাইন এবং মাল্টি-লাইন কমেন্ট (Single-Line and Multi-Line Comments)
CSS-এ দুই ধরনের কমেন্ট থাকতে পারে: সিঙ্গল-লাইন এবং মাল্টি-লাইন।
সিঙ্গল-লাইন কমেন্ট হলো সেই কমেন্টগুলো যা একটি স্টাইলশীটে শুধু এক লাইন ধরে। এখানে একটি স্টাইল রুলের উপরে CSS-এ সিঙ্গল-লাইন কমেন্টের একটি উদাহরণ দেওয়া হলো:
/* This style sets the font size of all <p> tags to 16px */
p { font-size: 16px; }এই কোডে, আমাদের কমেন্ট /* এবং */ মার্কারগুলির মধ্যে ظاهر হয়। আমাদের কমেন্টের নিচে একটি স্টাইল রুল রয়েছে, যা আমরা আগে আলোচনা 했던 সিনট্যাক্স ব্যবহার করে।
মাল্টি-লাইন কমেন্ট হলো সেই কমেন্টগুলো যা একটি স্টাইলশীটে একাধিক লাইন ধরে। এখানে একটি CSS মাল্টি-লাইন কমেন্টের উদাহরণ দেওয়া হলো:
/* This style sets the font size of all <p> tags to 16px
and also sets the color of the text to gray */
p { font-size: 16px; color: gray; }এই কমেন্ট দুটি লাইনে फैला हुआ এবং একটি CSS স্টাইল বর্ণনা করে।
উপসংহার (Conclusion)
যেকোনো প্রোগ্রামিং ভাষার মতো, CSS-এ কিছু বেসিক সিনট্যাক্স রয়েছে যা নির্ধারণ করে আপনি কীভাবে এই ভাষা ব্যবহার করে কোড লিখতে পারেন।
CSS-এ, একটি স্টাইল রুল গঠন করে দুটি উপাদান: ডিক্লারেশন এবং সিলেক্টর। ডিক্লারেশন হলো যেসব স্টাইল আপনি একটি এলিমেন্টে প্রযোজ্য করতে চান, এবং সিলেক্টর ব্যবহার করা হয় যেসব এলিমেন্টে আপনার ডিক্লারেশন প্রযোজ্য হবে সেগুলি সিলেক্ট করার জন্য।
অতিরিক্তভাবে, CSS-এ একটি কমেন্টিং ফিচার রয়েছে যা আপনাকে আপনার কোডের ওপর ভবিষ্যতের রেফারেন্সের জন্য নোট লেখার অনুমতি দেয়। কমেন্ট ব্রাউজার দ্বারা উপেক্ষা করা হয়।
এই টিউটোরিয়ালে CSS সিনট্যাক্সের বেসিক এবং CSS স্টাইলশীটে কীভাবে কমেন্ট করতে হয় তা আলোচনা করা হয়েছে। এখন আপনি CSS স্টাইল রুল এবং কমেন্ট পেশাদার ওয়েব ডেভেলপারের মত লিখতে পারবেন!
