সিএসএস সিনট্যাক্স - Css Syntax


সিএসএস এর স্টাইল কোড লেখার কৌশল বা নিয়মই হল সিএসএস সিনট্যাক্স।


সিএসএস সিনট্যাক্স

যে পদ্ধতি বা নিয়ম অনুসরণ করে সিএসএস এর স্টাইল কোড গুলো এইচটিএমএল এলিমেন্টে প্রয়োগ করা হয়, তাকেই সিএসএস সিনট্যাক্স বলে। একটি সিএসএস সিনট্যাক্স, যা ২ টি অংশ নিয়ে গঠিত হয়, এর একটি হল সিএসএস selector এবং অন্যটি হল declaration.

Example of CSS Selector

এখানে, সিএসএস selector অংশটি হল, যে এইচটিএমএল এলিমেন্টে স্টাইল কোড প্রয়োগ করা হবে, তার নাম, এটা হতে পারে, এক বা একাধিক ID বা Class এর নাম, বা সাধারণ ভাবে কোন এইচটিএমএল এলিমেন্ট, যেমন -h1,p ইত্যাদি। অর্থাৎ seclector হল এইচটিএমএল এলিমেন্ট বা এইচটিএমএল ট্যাগ, যার স্টাইল সিএসএস এর মাধ্যমে নির্ধারণ করা হবে।

declaration অংশটি হল, যেখানে এইচটিএমএল এলিমেন্ট বা ট্যাগের জন্য স্টাইল কোড গুলো লেখা হবে। এই অংশে একটি এইচটিএমএল এলিমেন্টের জন্য এক বা একাধিক স্টাইল কোড লেখা যায়।
প্রতিটি declaration এর আবার ২ টি অংশ আছে, একটি স্টাইল প্রপার্টি এবং অন্যটি তার মান বা value.প্রপার্টি হল style attribute, যার সাহায্যে স্টাইল এর ধরন নির্বাচন করা হয় এবং value হল সেই style attribute এর মান যার দ্বারা স্টাইলের পরিমান নির্ধারণ করা হয়।

সিএসএস seclector এর সাথে স্টাইলিং প্রপার্টি ব্যবহার করার জন্য দ্বিতীয় বন্ধনী বা secound bracket অর্থাৎ " { } " চিহ্ন ব্যবহার করা হয়।
একটি seclector এর সাথে একাধিক style attribute ব্যবহার করা যায়, তবে প্রতিটি স্টাইল প্রপার্টির মানের শেষে একটি কোলন অর্থাৎ " ; " চিহ্ন ব্যবহার করে প্রতিটি স্টাইল প্রপার্টিকে আলাদা করা হয়।


সিনট্যাক্স এর ব্যবহার

নিচে একটি উদাহরণ দেখুন, এখানে এইচটিএমএল <h1> ট্যাগের জন্য সিএসএস স্টাইল কোড লেখা হয়েছে।

উদাহরণ

h1 { 
  color: teal; 
  text-align: right; 
  }

নিচে একটি উদাহরণ দেখুন, এখানে ভিন্ন ভিন্ন এইচটিএমএল ট্যাগের জন্য অর্থাৎ <h1><p> ট্যাগের জন্য একই সিএসএস স্টাইল কোড ব্যবহার করা হয়েছে।

উদাহরণ

h1, p { 
  color: red; 
  text-align: right; 
  }


সিএসএস কোড কোথায় লিখবেন?

সিএসএস লেখার জন্য উইন্ডোজ এর সাধারণ নোটপ্যাডই যথেষ্ট, তবে আরও কিছু বেশি সুবিধা পাওয়ার জন্য বিভিন্ন এডিটিং সফটওয়্যার যেমন Notepad++, Notepad2, NetBeans ইত্যাদি ব্যবহার করাই উত্তম।
সিএসএস বিভিন্ন ভাবে লেখা যায়। যেমন বহিঃস্থ স্টাইল সীট এইচটিএমএল ডকুমেন্টের সাথে লিংক করে বা এইচটিএমএল ডকুমেন্ট এর ভেতরে <style> ট্যাগ ব্যবহার করে।

সিএসএস লেখার বিভিন্ন পদ্ধতি সম্পর্কে জানতে আমাদের পরবর্তী অধ্যায় সিএসএস ব্যবহার পদ্ধতি টিউটোরিয়াল পাতাটি পড়ুন।

সিএসএস স্টাইল কোড লেখার বিভিন্ন টেক্সট এডিটর সম্পর্কে জানতে আমাদের টেক্সট এডিটর টিউটোরিয়াল পাতাটি পড়ুন।