CSS ব্যবহার করে কোড লেখার আগে আপনাকে যে প্রথম বিষয় আয়ত্ত করতে হবে তা হল সিনট্যাক্স। শব্দটি syntax ভীতিজনক শোনাতে পারে, কিন্তু এটি কেবল কোড লেখার জন্য আমরা CSS-এ যে নিয়মগুলি ব্যবহার করি তা বোঝায়। এই নিয়মগুলি মানক, যা অন্য লোকেদের কোড পড়া সহজ করে তোলে।
CSS সিনট্যাক্সের দুটি সবচেয়ে গুরুত্বপূর্ণ অংশ হল নির্বাচক এবং ঘোষণা ব্লক। নির্বাচকদের ব্যবহার করা হয় উপাদান(গুলি) নির্দেশ করতে যা আপনি একটি ওয়েব পৃষ্ঠায় একটি শৈলী প্রয়োগ করতে চান, এবং ঘোষণা ব্লকগুলি আপনার নির্বাচিত উপাদানগুলিতে প্রয়োগ করতে চান এমন শৈলীগুলির রূপরেখা দেয়।
এই টিউটোরিয়ালটি উদাহরণ সহ, CSS সিনট্যাক্সের মৌলিক বিষয় এবং CSS শৈলীর গঠন নিয়ে আলোচনা করবে। সিএসএস-এ কীভাবে মন্তব্য লিখতে হয় তাও আমরা আলোচনা করব। এই টিউটোরিয়ালটি পড়ার শেষে, আপনার নিজস্ব CSS শৈলী লিখতে আপনার প্রয়োজনীয় জ্ঞান থাকবে।
CSS শৈলীর নিয়ম
CSS-এ, একটি স্টাইলশীট নিয়মের একটি সেট সংরক্ষণ করে যা নির্ধারণ করে যে কীভাবে একটি ওয়েবসাইট ব্যবহারকারীর স্ক্রিনে প্রদর্শিত হবে। উদাহরণস্বরূপ, একটি স্টাইলশীট একটি ওয়েব পৃষ্ঠার পাঠ্যের রঙ বা একটি নির্দিষ্ট শিরোনাম দ্বারা ব্যবহৃত ফন্টের আকারের রূপরেখা দিতে পারে।
এই নিয়মগুলি একটি আদর্শ কাঠামো অনুসরণ করে, যা দুটি অংশ নিয়ে গঠিত:নির্বাচক এবং ঘোষণা। সামগ্রিকভাবে, এইভাবে একটি শৈলী নিয়ম CSS এ প্রদর্শিত হয়:
h1 {
color: blue;
}
এই নির্দিষ্ট স্টাইলটি সমস্ত <h1> এর রঙ সেট করে একটি ওয়েব পৃষ্ঠার উপাদান নীল থেকে। এখন, আসুন এই স্টাইলটিকে এর দুটি উপাদান অংশে ভাগ করি যাতে আমরা এটি কীভাবে কাজ করে তা বিশ্লেষণ করতে পারি।
সিএসএস ঘোষণা
একটি CSS শৈলীর প্রথম অংশ হল ঘোষণা। Declaration একটি নির্দিষ্ট শৈলীর জন্য আরেকটি শব্দ যা আপনি একটি ওয়েব পৃষ্ঠার একটি উপাদানে প্রয়োগ করতে চান।
একটি CSS শৈলীর নিয়মে কমপক্ষে একটি ঘোষণা অন্তর্ভুক্ত করতে হবে এবং আপনি যতগুলি চান ততগুলি ঘোষণা অন্তর্ভুক্ত করতে পারেন। সুতরাং, আপনি যদি একটি ওয়েব পৃষ্ঠায় একটি বাক্সের প্রস্থ এবং উচ্চতা 100px সেট করতে চান এবং এর পটভূমির রঙ নীল করতে চান, আপনি একটি ঘোষণায় তা করতে পারেন।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।
ঘোষণা দুটি অংশ নিয়ে গঠিত, যা নিম্নরূপ:
- বৈশিষ্ট্য। এগুলি হল শৈলী বৈশিষ্ট্য যা একটি উপাদানে প্রয়োগ করা উচিত (যেমন রঙ, পটভূমি-রঙ, প্রস্থ, উচ্চতা)।
- মান। এই অংশটি ব্রাউজারকে বলে যে কীভাবে সম্পত্তি প্রদর্শন করা উচিত (অর্থাৎ, একটি বাক্সের রঙ "সবুজ" বা "লাল" এ সেট করা যেতে পারে)।
এখানে একটি CSS ঘোষণার সিনট্যাক্স রয়েছে:
property: value;
লক্ষ্য করুন যে আমাদের CSS প্রপার্টি প্রথমে প্রদর্শিত হয় এবং তারপর একটি কোলন (:) দ্বারা আলাদা করা হয়। কোলন আসার পর যে মানটি আমরা সংজ্ঞায়িত করেছি সেই সম্পত্তিতে আমরা বরাদ্দ করতে চাই।
প্রতিটি সিএসএস ঘোষণা একটি সেমি-কোলনে শেষ হওয়া উচিত (;)।
এখানে দুটি CSS ঘোষণার একটি উদাহরণ:
color: blue; font-size: 16px;
প্রথম ঘোষণাটি একটি HTML উপাদানের ফন্টের রঙকে "নীল" তে সেট করে। দ্বিতীয় ঘোষণাটি একটি একক উপাদানের ফন্টের আকারকে "16px" এ সেট করে। এই উভয় নির্বাচক একটি সম্পত্তির নাম দিয়ে শুরু হয় এবং একটি কমা এবং মান দ্বারা অনুসরণ করা হয় যা আমরা সম্পত্তিতে বরাদ্দ করতে চাই।
ঘোষণা কোঁকড়া বন্ধনী মধ্যে সংরক্ষণ করা হয়.
সিএসএস নির্বাচক
শেষ বিভাগে, আমরা আলোচনা করেছি কিভাবে একটি ওয়েব উপাদানে শৈলী প্রয়োগ করার জন্য ঘোষণা ব্যবহার করা হয়। কিন্তু ঘোষণা CSS সিনট্যাক্সের শুধুমাত্র একটি অংশ। অন্য অংশটি হল নির্বাচক, যারা ব্রাউজারকে বলে যে কোন উপাদানের জন্য ঘোষণার একটি নির্দিষ্ট সেট প্রযোজ্য হবে।
এখানে একটি CSS নির্বাচকের সিনট্যাক্স রয়েছে:
selector {
// List of declarations
}
নির্বাচক ব্রাউজারকে নির্দেশ দেয় যে কোন উপাদান(গুলি) শৈলীগুলির একটি সেট প্রয়োগ করা উচিত। সুতরাং, উদাহরণস্বরূপ, যদি আমরা সমস্ত <div> এর প্রস্থ সেট করতে চাই "500px" এর উপাদান, আমরা এই নিয়মটি ব্যবহার করে তা করতে পারি:
div {
width: 500px;
}
div এই ক্ষেত্রে আমাদের নির্বাচক এবং আমাদের CSS নিয়মের শুরুতে আসে। তারপর, আমরা আগে আলোচনা করা সিনট্যাক্স ব্যবহার করে কোঁকড়া বন্ধনীতে আমাদের ঘোষণাগুলিকে সংজ্ঞায়িত করি। এই নিয়মটি সমস্ত <div> এর প্রস্থ সেট করে একটি ওয়েব পৃষ্ঠার উপাদান "500px"।
আপনি যদি CSS নির্বাচকদের সম্পর্কে আরও জানতে আগ্রহী হন, তাহলে CSS নির্বাচকদের জন্য আমাদের শিক্ষানবিস গাইড পড়ুন।
একত্রে, ঘোষণা এবং নির্বাচকরা একটি CSS শৈলীর নিয়ম তৈরি করে।
CSS মন্তব্য
এখন পর্যন্ত, আমরা আলোচনা করেছি কিভাবে CSS এ স্টাইল নিয়ম লিখতে হয়। যাইহোক, স্টাইল শীটে লেখা সব লেখাই স্টাইল নিয়ম নয়।
CSS শৈলী শীট মন্তব্য সংরক্ষণ করতে সক্ষম. মন্তব্যগুলি হল একটি স্টাইলশীটে কোড বোঝা সহজ করার উদ্দেশ্যে একটি বিকাশকারী দ্বারা লিখিত পাঠ্যের ব্লক৷ মন্তব্যগুলি ব্রাউজার দ্বারা উপেক্ষা করা হয়, তাই আপনি একটি স্টাইলশীটে যতগুলি চান ততগুলি মন্তব্য যোগ করতে পারেন৷
মন্তব্য লেখা বিভিন্ন কারণে উপকারী।
প্রথমত, লেখার মন্তব্যগুলি আপনাকে আপনার কোডটি লেখার সময় ট্র্যাক রাখতে দেয় এবং আপনাকে আপনার চিন্তার একটি রেকর্ড দেয় যা আপনি ভবিষ্যতে কোডের ব্লক বোঝার জন্য সাহায্যের প্রয়োজন হলে উল্লেখ করতে পারেন৷ দ্বিতীয়ত, মন্তব্য লেখার ফলে ডেভেলপাররা যারা কোডের একটি ব্লক লেখেননি তাদের উদ্দেশ্য এবং কোড লেখার পিছনে আপনার উদ্দেশ্য বুঝতে পারবেন।
CSS মন্তব্যগুলি /* সিনট্যাক্স দিয়ে শুরু হয় এবং */ সিনট্যাক্স দিয়ে শেষ হয়।
একক-লাইন এবং বহু-লাইন মন্তব্য
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 শৈলী বর্ণনা করে।
উপসংহার
যেকোনো প্রোগ্রামিং ভাষার মতো, CSS-এর কিছু মৌলিক সিনট্যাক্স রয়েছে যা সংজ্ঞায়িত করার জন্য আপনি কীভাবে ভাষা ব্যবহার করে কোড লিখতে পারেন।
CSS-এ, দুটি উপাদান রয়েছে যা একটি শৈলীর নিয়ম তৈরি করে:ঘোষণা এবং নির্বাচক। ঘোষণাগুলি হল সেই শৈলী যা আপনি একটি উপাদানে প্রয়োগ করতে চান এবং নির্বাচকদের ব্যবহার করা হয় উপাদানগুলি নির্বাচন করতে যা আপনার ঘোষণা প্রয়োগ করা হবে।
এছাড়াও, CSS এর একটি মন্তব্য করার বৈশিষ্ট্য রয়েছে যা আপনাকে ভবিষ্যতের রেফারেন্সের জন্য আপনার কোডে নোট লিখতে দেয়। মন্তব্য ব্রাউজার দ্বারা উপেক্ষা করা হয়.
এই টিউটোরিয়ালটি CSS সিনট্যাক্সের মূল বিষয়গুলি এবং কীভাবে একটি CSS স্টাইল শীটে মন্তব্য করতে হয় তা নিয়ে আলোচনা করা হয়েছে। এখন আপনি একজন পেশাদার ওয়েব ডেভেলপারের মত CSS শৈলীর নিয়ম এবং মন্তব্য লিখতে শুরু করতে প্রস্তুত!
