আপনি যখন একটি ওয়েবসাইট দেখতে আসেন, তখন আপনার চোখে প্রথমে কি পড়ে? ডিজাইন, রঙ, লেআউট - এই সব উপাদান একটি ওয়েব পেজ তৈরি করতে মুখ্য ভূমিকা পালন করে। এখানে CSS, অথবা Cascading Style Sheets, কাজ করে। এই সংক্ষিপ্ত গাইডে, আমরা সিএসএসের মৌলিক প্রিন্সিপল এবং কীভাবে এটি সাধারণ HTML-কে আকর্ষণীয় ওয়েবসাইটে পরিণত করতে সাহায্য করে তা সম্পর্কে আলোচনা করব।
CSS কি?
CSS হলো Cascading Style Sheets এর সংক্ষিপ্ত রূপ, যা ওয়েবসাইটের ডিজাইন, ফর্ম্যাট, এবং লেআউট নির্ধারণ করে। CSS ব্যবহার করে ওয়েবসাইটের রঙ, ফন্ট, আকার, এবং অবস্থান মুখ্য ও আকর্ষণীয় করা হয়।
সিএসএস (Cascading Style Sheets) ওয়েব ডেভেলপমেন্টে গুরুত্বপূর্ণ একটি উপাদান, যা ওয়েবসাইটের মুখ্য দৃশ্য, ডিজাইন, এবং ব্যাপার গুলির সাথে সম্পর্কিত। এটি ওয়েব পৃষ্ঠাগুলির রঙ, ফন্ট, প্রস্তুতি, এবং কিছু নির্ধারণ করে, যা সাধারণ HTML বা স্ট্রাকচার পরিবর্তন না করে ওয়েবসাইটের দৃশ্যকে আকর্ষণীয় ও প্রয়োজনীয় ভাবে প্রদর্শন করে। সিএসএস স্টাইল শীটগুলি স্বচ্ছতা এবং সংগঠনে ওয়েব পৃষ্ঠাগুলির ডিজাইন এবং লেআউট সুধারতে সাহায্য করে, যা ব্যবহারকারীদের আকর্ষণীয় এবং ব্যবহারযোগ্য ওয়েব অভিজ্ঞতা প্রদান করে।
একটি সহজ উপমা দিয়ে বললে, CSS হলো ওয়েব ডিজাইনের স্টাইলিং এবং আকৃতির জন্য একটি ভাষা, যা ওয়েবসাইটের সাধারণ HTML এলিমেন্টগুলির চেহারা এবং বিন্যাস নির্ধারণ করে। HTML ওয়েবসাইটের পাতার মৌলিক ঢাল এবং তালিকা, তা সম্পর্কে তথ্য প্রদান করে, মন্তব্য করে, এবং সাধারণ কন্টেন্ট দেখায়, এর মধ্যে থাকে। CSS তবে এই পাতাগুলির চেহারা এবং বিন্যাস প্রদান করে, যা তাদের শৃংগার, রং, আকার, এবং সৌন্দর্য যোগ করে, মোটামুটি ওয়েবসাইটের "পোশাক" হিসেবে কাজ করে।
আরো জানুন: HTML কি? HTML এর বেসিক
সংক্ষেপে, CSS ওয়েবসাইটের সৌন্দর্য এবং নির্দেশনা নির্ধারণে গুরুত্বপূর্ণ ভূমিকা পালন করে, যা ব্যবহারকারীদের একটি স্মুদ্ধ ওয়েব অভিজ্ঞতা প্রদান করে।
CSS কিভাবে কাজ করে?
CSS (ক্যাসকেডিং স্টাইল শীট) হলো একটি স্টাইলশীট ভাষা, যা HTML এবং XML-এ লেখা ওয়েব ডকুমেন্টের উপস্থাপনা এবং বিন্যাস নিয়ন্ত্রণ করতে ব্যবহৃত হয়। এটি স্টাইল এবং রুল গুলি ব্যবহার করে কাজ করে, যা নির্দিষ্ট করে যে কীভাবে একটি ওয়েব পৃষ্ঠার উপাদানগুলি প্রদর্শিত হবে। এখানে CSS কিভাবে কাজ করে তার একটি প্রাথমিক ওভারভিউ দেয়া হলো:
সিলেক্টর (Selector): সিএসএস সিলেক্টর দিয়ে শুরু হয়, যা আপনি কাস্টমাইজ করতে চান এমন HTML উপাদানগুলি বাছাই করার জন্য টেমপ্লেট হিসাবে কাজ করে। উদাহরণ স্বরূপ, আপনি সকল `<p>` উপাদান বা একটি নির্দিষ্ট শ্রেণির উপাদান (elements) নির্বাচন করতে পারেন, যেমন `.header`।
প্রোপার্টিজ (Properties): সিএসএস গুলি স্টাইল নির্ধারণ করতে ব্যবহৃত সম্প্রতি, একটি HTML এলিমেন্টের সাথে যে সামগ্রিক স্টাইল আপ্লাই করা হবে তা নির্ধারণ করে। এই গুলির মধ্যে ফন্ট, রঙ, আকার, পদচিহ্ন, দূরত্ব, এবং আরো অনেক কিছু প্রস্তুত থাকতে পারে, যা ওয়েব পৃষ্ঠাগুলির দৃশ্যতার ব্যাপারে গুরুত্বপূর্ণ।
ভ্যালু (Values): সিএসএস ভ্যালু গুলো স্টাইল নির্ধারণ করতে ব্যবহৃত হয়, যেমন ফন্টের আকার, রঙ, দূরত্ব, প্রাপ্তি, এবং আরো অনেক কিছু। এই মানগুলি একটি নির্দিষ্ট স্টাইল সংজ্ঞা করে এবং ওয়েব পৃষ্ঠাগুলির উপর প্রভাব ফেলে, যা উপস্থিত দৃশ্যতার সাথে সম্পর্কিত। এই মানগুলি উপাদানের প্রস্তুতি করার সময় ব্যবহার করা হয়, এবং তাদের মাধ্যমে ওয়েব পৃষ্ঠাগুলির দৃশ্যতা ও অবস্থান নির্ধারণ করা হয়।
প্রতিটি প্রোপার্টির জন্য, একটি মান নির্দিষ্ট করা হয়। উদাহরণস্বরূপ, `color: blue;` পাঠ্যের রঙকে নীলে সেট করে এবং `font-size: 16px;` ফন্টের আকারকে 16 পিক্সেলে সেট করে।
ডিক্লারেশন (Declaration): সিএসএস ঘোষণা হলো সিএসএস স্টাইলের একটি অংশ, যা নির্ধারণ করে কোন নির্দিষ্ট HTML উপাদানে কী ধরনের স্টাইল প্রয়োজন।
একটি প্রোপার্টি এবং এর ভ্যালুর সমন্বয়কে CSS ডিক্লারেশন বলে। এগুলি সাধারণত `{}` বন্ধনীতে আবদ্ধ থাকে এবং রুলস এর একটি সেট তৈরি করতে একত্রিত করা হয়।
রুল (Rule): একটি সম্পূর্ণ সিএসএস রুল একটি সিলেক্টরের মধ্যে সংযুক্ত এক বা একাধিক ঘোষণা নিয়ে গঠিত। এখানে একটি সাধারণ CSS রুলের একটি উদাহরণ:
h1 {
color: red;
font-size: 24px;
}
এই রুলে, সিলেক্টর হলো `h1`, এবং এটি HTML ডকুমেন্টের সকল `<h1>` উপাদানে নির্দিষ্ট স্টাইল প্রয়োগ করে।
ক্যাসকেডিং (Cascading): CSS-এর "ক্যাসকেডিং" অংশটি বোঝায় কিভাবে স্টাইল প্রয়োগ করা হবে যখন দুটি বিরোধপূর্ণ রুল থাকে। CSS রুলগুলি বিভিন্ন উৎস থেকে আসতে পারে, যেমন বাহ্যিক স্টাইলশীট, অভ্যন্তরীণ স্টাইলশীট বা ইনলাইন স্টাইল। নিয়মগুলি একটি নির্দিষ্ট ক্রমে প্রয়োগ করা হয় এবং নির্দিষ্ট নিয়মগুলি সাধারণত কম নির্দিষ্টগুলির চেয়ে অগ্রাধিকার পায়। সিলেক্টরের ধরন এবং ইনলাইন স্টাইলের মতো বিষয়গুলির দ্বারা নির্দিষ্টতা (Specificity) নির্ধারণ করা হয়।
ইনহেরিটেন্স (Inheritance): CSS ইনহেরিটেন্স বা সিএসএস উপাদানের উত্তরাধিকার, এটি একটি গুরুত্বপূর্ণ অংশ যা ওয়েব ডিজাইনে ব্যবহৃত হয়। এর মানে, একটি HTML উপাদানের স্টাইল নির্ধারণ করা যেতে পারে উপরের বা পূর্ববর্তী উপাদানের স্টাইলের উপরে, যদি উপাদানের নিজস্ব স্টাইল না থাকে।
স্পেসিফিকিটি (Specificity): এটি নির্ধারণ করে যে বিরোধপূর্ণ স্টাইল থাকলে কোন CSS নিয়মটি প্রাধান্য পায়। ব্যবহৃত নির্বাচকের ধরন এবং ইনলাইন স্টাইল বিদ্যমান কিনা তার উপর ভিত্তি করে স্পেসিফিকিটি গণনা করা হয়। উদাহরণস্বরূপ, একটি ইনলাইন স্টাইল সাধারণত একটি বিরোধপূর্ণ বহিরাগত স্টাইলশীট নিয়মকে ওভাররাইড করবে।
রেন্ডারিং (Rendering): রেন্ডারিং হলো ওয়েব পেজে সিএসএস স্টাইল কোডের মাধ্যমে কীভাবে ডকুমেন্ট প্রদর্শন হবে তা নির্ধারণ করার প্রক্রিয়া। এটি ওয়েব ডিজাইনকে আকর্ষণীয় করে তোলে এবং ব্রাউজার এবং ডিভাইসে ওয়েব পেজ প্রদর্শনের জন্য গুরুত্বপূর্ণ।
সংক্ষেপে, সিএসএস সিলেক্টরের সাথে এইচটিএমএল প্রপার্টিজ নির্বাচন করে এবং বৈশিষ্ট্য এবং রুল গুলির মাধ্যমে সেই প্রপার্টি গুলিতে স্টাইলিং রুল প্রয়োগ করে কাজ করে। ক্যাসকেডিং এবং স্পেসিফিকিটি নিয়মগুলি দ্বন্দ্ব সমাধান করতে সাহায্য করে এবং ব্রাউজারটি তখন সম্মিলিত HTML এবং CSS এর উপর ভিত্তি করে ওয়েব পেজ রেন্ডার করে।
CSS শিখতে অনুশীলন করতে ভিজিট করতে পারেন: W3Schools - CSS
আশা করি, পোস্টটি আপনার ভালো লেগেছে। কোনো প্রশ্ন থাকলে কমেন্টে জানাবেন।