ক্যাসকেডিং স্টাইল শিট বা CSS হল এমন একটি ভাষা যা একটি ওয়েবপেজকে কেমন দেখাবে তা বলে। CSS একটি ওয়েবসাইটের সরল কাঠামোতে রঙ, স্টাইল এবং লেআউট যোগ করে। আপনি যেমন সুন্দর এবং সুন্দর দেখাতে আপনার পোশাক নির্বাচন করেন, তেমনি CSS একটি ওয়েবপেজকে সাজাতে এবং আকর্ষণীয় দেখাতে সাহায্য করে। ওয়েব ডেভেলপমেন্টে, আমরা পৃষ্ঠার টেক্সট এবং বাক্সের রঙ, আকার এবং অবস্থান পরিবর্তন করতে CSS ব্যবহার করি। এই পাঠটি আপনাকে সহজ ভাষায় CSS এর মূল বিষয়গুলির সাথে পরিচয় করিয়ে দেবে। আমরা শিখব CSS কী, এটি কেন গুরুত্বপূর্ণ এবং এটি HTML এর সাথে কীভাবে কাজ করে।
CSS হল ক্যাসকেডিং স্টাইল শিট। এটি ওয়েবপেজ স্টাইল করার জন্য ব্যবহৃত একটি বিশেষ ভাষা। CSS কে একটি ভবনের রঙ এবং সাজসজ্জা হিসেবে ভাবুন। ভবনটি HTML দিয়ে তৈরি, এবং CSS এটিকে সুন্দর করে তোলে। CSS ব্যবহার করে, আপনি আপনার ওয়েবপেজের ব্যাকগ্রাউন্ড রঙ, ফন্ট স্টাইল এবং উপাদানগুলির চারপাশের স্থান পরিবর্তন করতে পারেন। CSS হল এমন একটি টুল যা ওয়েব ডিজাইনারদের ওয়েবসাইটগুলিকে আরও সুন্দর এবং মজাদার করে তুলতে সাহায্য করে।
কল্পনা করুন আপনি একটি ছবি রঙ করছেন। ছবিটার লাইনগুলো একটি ওয়েবসাইটের মৌলিক কাঠামোর মতো। CSS হলো রঙিন রঙিন রঙ এবং মার্কার যা ছবিকে প্রাণবন্ত করে তোলে। কয়েকটি সহজ নিয়ম মেনে চললে, আপনি আপনার সম্পূর্ণ ছবিকে সাদামাটা থেকে রঙিন করে তুলতে পারেন!
ওয়েবসাইটগুলিকে আকর্ষণীয় এবং ব্যবহারে সহজ করার জন্য CSS ব্যবহার করা হয়। এটি স্টাইলকে কন্টেন্ট থেকে আলাদা রাখে। এর অর্থ হল পৃষ্ঠার শব্দ এবং ছবি (HTML দ্বারা সরবরাহিত) একই থাকে, অন্যদিকে CSS তাদের চেহারা নিয়ন্ত্রণ করে। যখন আপনি স্টাইল আপডেট করেন, তখন আপনাকে কন্টেন্ট পরিবর্তন করার প্রয়োজন হয় না। এই বিচ্ছেদ ওয়েব ডেভেলপারদের দ্রুত কাজ করতে সাহায্য করে এবং সাইটগুলিকে দেখার জন্য আরও সুন্দর করে তোলে।
CSS কে আপনার পছন্দের পোশাকের মতো ভাবুন। আপনি যদি ভিন্ন পোশাক পরেন, তাহলে আপনাকে আলাদা দেখাবে, কিন্তু আপনি এখনও একই ব্যক্তি। CSS একটি ওয়েবসাইটের তথ্য পরিবর্তন না করেই তার চেহারা পরিবর্তন করে। এর ফলে শুধুমাত্র একটি CSS ফাইল সম্পাদনা করে একটি সম্পূর্ণ ওয়েবসাইটের নকশা আপডেট করা সহজ হয়।
CSS HTML এর সাথে হাত মিলিয়ে কাজ করে। HTML হল এমন একটি ভিত্তি যা একটি ওয়েবপেজে জিনিসগুলি কোথায় যাবে তা নির্ধারণ করে। CSS এর পরে রঙ, ফন্ট এবং স্টাইল যোগ করা হয়। যখন একটি ব্রাউজার একটি ওয়েবপেজ লোড করে, তখন এটি প্রথমে HTML দিয়ে কাঠামো তৈরি করে এবং তারপর CSS এ সংজ্ঞায়িত স্টাইলগুলি প্রয়োগ করে।
CSS নিয়মের একটি সেট হিসেবে লেখা হয়। প্রতিটি নিয়মের দুটি অংশ থাকে: একটি নির্বাচক এবং একটি ঘোষণা ব্লক। নির্বাচক ব্রাউজারকে কোন HTML উপাদানটি স্টাইল করতে হবে তা বলে। ঘোষণা ব্লকে এক বা একাধিক ঘোষণা থাকে। প্রতিটি ঘোষণার একটি সম্পত্তি এবং একটি মান থাকে। সম্পত্তিটি হল আপনি যা পরিবর্তন করতে চান এবং মানটি কীভাবে এটি পরিবর্তন করতে হবে তা বলে।
উদাহরণস্বরূপ, পৃষ্ঠার পটভূমির রঙ হালকা নীল করতে, আপনি একটি নিয়ম লিখতে পারেন যা দেখতে এইরকম:
<code>বডি {
পটভূমির রঙ: হালকা নীল;
}</কোড>এই সহজ নিয়মটি পুরো পৃষ্ঠার পটভূমি পরিবর্তন করে।
একটি মৌলিক CSS নিয়ম একটি সহজ প্যাটার্ন অনুসরণ করে। এটি নির্বাচক এবং বৈশিষ্ট্য এবং মানগুলির একটি ব্লক দেখায়। প্যাটার্নটি দেখতে এরকম:
<code>নির্বাচক {
সম্পত্তি: মূল্য;
}</কোড>এখানে, নির্বাচক কোন HTML উপাদানটিকে লক্ষ্য করবে তা নির্বাচন করে। সম্পত্তি হল আপনি যা পরিবর্তন করতে চান, এবং মান হল আপনি কীভাবে এটি পরিবর্তন করতে চান।
উদাহরণস্বরূপ, যদি আপনি চান যে সমস্ত অনুচ্ছেদের লেখা নীল হোক, তাহলে আপনি লিখবেন:
<code>p {
রঙ: নীল;
}</কোড>এই নিয়মটি ওয়েব ব্রাউজারকে বলে যে প্রতিটি <p> (অনুচ্ছেদ) উপাদানে নীল লেখা থাকা উচিত।
সিএসএস সিলেক্টর আপনাকে আপনার ওয়েবপেজের কোন উপাদানগুলি স্টাইল নিয়ম দ্বারা প্রভাবিত হবে তা বেছে নিতে দেয়। বিভিন্ন ধরণের সিলেক্টর রয়েছে এবং প্রতিটি আলাদাভাবে কাজ করে।
এই বিভিন্ন নির্বাচকগুলি আপনাকে আপনার ওয়েবপৃষ্ঠার নির্দিষ্ট অংশগুলিকে স্টাইল করার জন্য প্রচুর ক্ষমতা দেয়। এগুলি আপনাকে উপাদানগুলিকে সুনির্দিষ্টভাবে লক্ষ্য করতে এবং সেগুলি কেমন দেখাবে তা নির্ধারণ করতে দেয়।
CSS অনেকগুলি ভিন্ন ভিন্ন বৈশিষ্ট্য প্রদান করে যা আপনি আপনার ওয়েবপৃষ্ঠাকে স্টাইল করার জন্য ব্যবহার করতে পারেন। প্রতিটি বৈশিষ্ট্য আপনাকে একটি উপাদানের চেহারার একটি নির্দিষ্ট দিক পরিবর্তন করতে দেয়। কিছু সাধারণ বৈশিষ্ট্য হল:
প্রতিটি CSS প্রোপার্টির পরে একটি মান থাকে। উদাহরণস্বরূপ, টেক্সটকে লাল রঙ দিতে, আপনি লিখতে পারেন:
<code>p {
রঙ: লাল;
}</কোড>এই সহজ নিয়মের মাধ্যমে সকল অনুচ্ছেদে লাল লেখা থাকে। রঙ বৈশিষ্ট্যটি টেক্সটটি কীভাবে প্রদর্শিত হবে তা নিয়ন্ত্রণ করে এবং লাল মানটি কোন রঙটি হবে তা বলে দেয়।
CSS-এ "ক্যাসকেডিং" শব্দের অর্থ হল স্টাইলগুলি এক নিয়ম থেকে অন্য নিয়মে প্রবাহিত হতে পারে। যদি একই উপাদানে দুটি নিয়ম প্রয়োগ করা যেতে পারে, তাহলে ক্রম নির্ধারণ করতে পারে কোনটি জিতবে। এটি স্ট্যাকিং ব্লকের মতো যেখানে একটি ব্লক কখনও কখনও অন্যটির অংশকে ঢেকে রাখে।
একটি সাধারণ নিয়ম হল যে HTML এলিমেন্টের ভিতরে সরাসরি লেখা স্টাইল (যাকে ইনলাইন স্টাইল বলা হয়) আপনার CSS ফাইলের স্টাইলগুলিকে ওভাররাইড করবে। আরেকটি নিয়ম হল যদি কোনও প্যারেন্ট এলিমেন্ট স্টাইল করা হয়, তাহলে এর চাইল্ড এলিমেন্টগুলি সেই স্টাইলটি উত্তরাধিকারসূত্রে পেতে পারে যদি না তাদের অন্যথায় বলা হয়।
উদাহরণস্বরূপ, যদি আপনি একটি <div> এর টেক্সট রঙ সবুজ সেট করেন, তাহলে <div> এর ভিতরের টেক্সটটি প্রায়শই উত্তরাধিকারের কারণে সবুজ দেখাবে। এটি একটি ওয়েবপেজে একটি সামঞ্জস্যপূর্ণ নকশা বজায় রাখতে সাহায্য করে।
CSS এর মাধ্যমে, আপনি অনেক উপায়ে রঙ পরিবর্তন করতে পারেন। আপনি লাল , নীল এবং সবুজের মতো সাধারণ রঙের নাম ব্যবহার করতে পারেন। আপনি লাল রঙের জন্য হেক্সাডেসিমেল কোড যেমন <code>#FF0000</code> অথবা RGB মান যেমন <code>rgb(255, 0, 0)</code> ব্যবহার করতে পারেন।
ফন্ট হল CSS-এর আরেকটি গুরুত্বপূর্ণ অংশ। ফন্ট হল নোটবুকে আপনার বেছে নেওয়া হাতের লেখার স্টাইলের মতো। CSS-এ, আপনি ফন্ট ফ্যামিলি, আকার, ওজন এবং স্টাইল পরিবর্তন করতে পারেন। উদাহরণস্বরূপ, আপনি যদি চান যে আপনার অনুচ্ছেদগুলি Arial-এ প্রদর্শিত হোক, তাহলে আপনি ব্যবহার করতে পারেন:
<code>p {
ফন্ট-পরিবার: এরিয়াল, সানস-সেরিফ;
}</কোড>এই নিয়মটি ব্রাউজারকে Arial ফন্টে টেক্সট প্রদর্শন করতে বলে, যদি এটি উপলব্ধ থাকে এবং যদি না থাকে তবে অন্য একটি অনুরূপ ফন্ট ব্যবহার করতে বলে।
CSS ব্যবহার করে রঙ এবং ফন্ট পরিবর্তন করলে লেখা পড়া সহজ হয় এবং আপনার ওয়েবপৃষ্ঠাটি দেখতে আরও আকর্ষণীয় হয়।
সিএসএস বক্স মডেল হলো একটি পৃষ্ঠায় একটি উপাদানের বিভিন্ন অংশ কীভাবে সাজানো আছে তা বোঝার একটি উপায়। প্রতিটি উপাদান একটি বাক্সের মতো। বক্স মডেলটিতে চারটি অংশ রয়েছে:
একটি ছবি কল্পনা করুন। ছবি নিজেই বিষয়বস্তু। ছবিটির চারপাশে যে ম্যাটটি রয়েছে তা প্যাডিংয়ের মতো। যে ফ্রেমটি সবকিছু একসাথে ধরে রাখে তা হল সীমানা। এবং ফ্রেমের চারপাশের স্থান হল মার্জিন। এই মডেলটি ব্যবহার করে, আপনি নিশ্চিত করতে পারেন যে আপনার ডিজাইনের সমস্ত অংশে যথাযথ স্থান এবং ভারসাম্য রয়েছে।
CSS কেবল রঙ এবং ফন্ট সম্পর্কে নয়; এটি আপনাকে একটি ওয়েবপেজে উপাদানগুলি সাজাতেও সাহায্য করে। একে লেআউট এবং পজিশনিং বলা হয়। CSS এর সাহায্যে, আপনি পৃষ্ঠায় প্রতিটি উপাদান কোথায় প্রদর্শিত হবে তা নির্ধারণ করতে পারেন।
ওয়েবপেজের লেআউট নিয়ন্ত্রণ করার বিভিন্ন উপায় রয়েছে, যার মধ্যে রয়েছে:
এই লেআউট কৌশলগুলি ব্যবহার করা খেলনাগুলিকে একটি তাকে সাজানোর মতো। প্রতিটি খেলনা কোথায় যাবে তা আপনিই ঠিক করুন যাতে সেগুলিতে পর্যাপ্ত জায়গা থাকে এবং সুন্দর দেখায়। এটি আপনার ওয়েবপৃষ্ঠাটিকে আরও সুসংগঠিত এবং আকর্ষণীয় করে তোলে।
HTML এবং CSS কীভাবে একসাথে কাজ করে তার একটি উদাহরণ এখানে দেওয়া হল। এই নমুনা কোডটি কিছু স্টাইলিং সহ একটি সহজ ওয়েবপৃষ্ঠা দেখায়:
<কোড><!ডক্টাইপ html>
<html>
<head>>
<স্টাইল>
শরীর {
পটভূমির রঙ: হালকা নীল;
}
এইচ১ {
রঙ: গাঢ় নীল;
ফন্ট-আকার: 24px;
}
পি {
রঙ: সবুজ;
ফন্ট-আকার: ১৮ পিক্সেল;
}
</স্টাইল>
</head>
<শরীর>>
<h1>আমার প্রথম ওয়েবপেজ</h1>
<p>এটি CSS ব্যবহার করে তৈরি একটি সহজ ওয়েবপেজ।</p>
</শরীরের>
</html></code>এই কোডটি হালকা নীল ব্যাকগ্রাউন্ড রঙের একটি ওয়েবপেজ তৈরি করে। হেডার টেক্সটটি গাঢ় এবং প্যারাগ্রাফ টেক্সটটি সবুজ। <code><style></code> ট্যাগের ভিতরের CSS দেখায় কিভাবে নিয়ম লেখা এবং প্রয়োগ করা হয়।
আপনি তিনটি প্রধান উপায়ে আপনার HTML-এ CSS যোগ করতে পারেন। পরিস্থিতির উপর নির্ভর করে প্রতিটি পদ্ধতির নিজস্ব ব্যবহার রয়েছে:
পেশাদার ওয়েব ডেভেলপমেন্টে বহিরাগত পদ্ধতিটি সবচেয়ে সাধারণ কারণ এটি HTML কে সুন্দর রাখে এবং আপনাকে একসাথে অনেক পৃষ্ঠায় স্টাইল আপডেট করতে দেয়।
CSS অনেক দিক থেকেই খুবই সহায়ক। ওয়েব ডেভেলপমেন্টে CSS ব্যবহারের কিছু সুবিধা এখানে দেওয়া হল:
CSS ব্যবহার করা একটি বিশেষ টুলবক্স থাকার মতো। টুলবক্সের প্রতিটি টুল আপনার ওয়েবপৃষ্ঠার চেহারা সহজেই উন্নত করতে সাহায্য করে। অনুশীলনের সময়, আপনি দেখতে পাবেন ওয়েবসাইটগুলিকে সুন্দর এবং ব্যবহারকারী-বান্ধব করে তুলতে CSS কতটা শক্তিশালী হতে পারে।
আপনার দেখা প্রতিটি ওয়েবসাইটই কোন না কোনভাবে CSS ব্যবহার করে। আপনার পছন্দের কার্টুন সাইট থেকে শুরু করে স্কুলের প্রকল্প পৃষ্ঠা পর্যন্ত, CSS একটি মজাদার এবং সহজে পঠনযোগ্য লেআউট তৈরি করতে সাহায্য করে। যখন আপনি একটি রঙিন ওয়েবপৃষ্ঠা দেখতে পান যেখানে পরিষ্কার ব্যবধান এবং স্পষ্ট লেখা থাকে, তখন এটি CSS-এর কাজ করে।
গেম, কার্টুন বা অনলাইন গল্পের মতো জনপ্রিয় ওয়েবসাইটগুলির ডিজাইন বিবেচনা করুন। রঙ, ফন্ট এবং লেআউটের সুচিন্তিত ব্যবহার এই ওয়েবসাইটগুলিকে আকর্ষণীয় এবং আকর্ষণীয় করে তুলতে সাহায্য করে। অ্যাপ এবং মোবাইল সাইটগুলিতেও CSS ব্যবহার করা হয়, যা নিশ্চিত করে যে কন্টেন্ট বড় স্ক্রিন এবং ছোট ফোন উভয় ক্ষেত্রেই ভালো দেখাচ্ছে।
দৈনন্দিন জীবনে, CSS একটি ঘর সাজানোর মতো। আপনি আপনার ঘরের জন্য একটি থিম বেছে নিতে পারেন, রঙিন ছবি ঝুলিয়ে রাখতে পারেন এবং আপনার আসবাবপত্র সুন্দরভাবে সাজাতে পারেন। ওয়েবসাইটের ক্ষেত্রেও CSS একই কাজ করে। এটি ডিজিটাল স্পেসে শৃঙ্খলা এবং সৌন্দর্য এনে দেয়, যা দর্শনার্থীদের জন্য এটিকে মনোরম করে তোলে।
CSS সম্পর্কে আমরা যে প্রধান বিষয়গুলো শিখেছি তা এখানে দেওয়া হল:
ওয়েব ডেভেলপমেন্টের ক্ষেত্রে CSS একটি গুরুত্বপূর্ণ অংশ, যা সাইটগুলিকে সুন্দর এবং নেভিগেট করা সহজ করে তোলে। আপনি যখন আরও অন্বেষণ করবেন এবং আপনার নিজস্ব ওয়েবপৃষ্ঠা তৈরি করার চেষ্টা করবেন, তখন মনে রাখবেন যে CSS হল আপনার সৃজনশীলতা প্রকাশের হাতিয়ার। রঙ, ফন্ট এবং লেআউট নিয়ে পরীক্ষা-নিরীক্ষা করে মজা করুন, কারণ প্রতিটি ছোট পরিবর্তনই একটি সু-নকশাকৃত ওয়েবসাইটের জাদুকে আরও বাড়িয়ে তোলে।
আপনার পছন্দের ওয়েবসাইটগুলি অনুশীলন এবং পর্যবেক্ষণ করতে থাকুন। লক্ষ্য করুন কিভাবে বিভিন্ন স্টাইল ব্যবহার করে আপনার মনোযোগ আকর্ষণ করা হয় এবং একটি মনোরম অভিজ্ঞতা তৈরি করা হয়। সময়ের সাথে সাথে, আপনি দেখতে পাবেন যে সহজ HTML কাঠামোগুলিকে দৃশ্যমানভাবে আকর্ষণীয় ওয়েবপেজে রূপান্তরিত করার ক্ষেত্রে CSS কতটা শক্তিশালী হতে পারে।