কিভাবে একটি ওয়েবসাইট কোড করব? পর্ব -০২ (css এর সাথে পরিচিত হই )

  1. CSS নির্বাচকদের সাথে পরিচিত হন

ঠিক যেমন HTML এর ট্যাগ আছে, তেমনি CSS এর সিলেক্টর আছে।

নির্বাচকরা বর্ণনা করে যে কীভাবে একটি প্রদত্ত উপাদান চেহারা অনুসারে আচরণ করা উচিত। এখানে একটি CSS নির্বাচকের উদাহরণ দেওয়া হল:

p {

font-size:18px;

}

এই নির্বাচক নির্দেশ করে যে নথির মধ্যে থাকা সমস্ত HTML <p> ট্যাগের ফন্ট সাইজ 18px হবে।

যাইহোক, CSS নির্বাচকদের ব্যবহার করার একটি আরও বাস্তব উপায় হল একটি নির্দিষ্ট স্টাইলিংয়ের জন্য প্রদত্ত ধরণের সমস্ত ট্যাগগুলিকে সীমাবদ্ধ করা নয়, বরং বিভিন্ন “ক্লাস” তৈরি করা এবং একে একে ট্যাগগুলিতে বরাদ্দ করা।

উদাহরণস্বরূপ, CSS-এ একটি ক্লাস নির্বাচক দেখতে এইরকম:

.সাধারণ-পাঠ্য {

ফন্ট-আকার: 18px;

}

ক্লাসের নামের আগে ডট (.) লক্ষ্য করুন (normal-text)। ” normal-text” শ্রেণীটি সংজ্ঞায়িত করার সাথে, আমরা এখন সেই নির্দিষ্ট HTML ট্যাগগুলিতে সেই শ্রেণীটি বরাদ্দ করতে পারি যা আমরা 18px আকারে করতে চাই।

উদাহরণ স্বরূপ:

<p class=”normal-text”>This text is going to be 18px.</p>

উপরে CSS কোডের সেই অংশের সমস্ত উপাদান ব্যাখ্যা করতে আরও এক মিনিট সময় নেওয়া যাক:

  • .normal-text – class definition; ক্লাসের নামের পরে এবং খোলা এবং বন্ধ বন্ধনীর মধ্যে সবকিছুই নির্ধারণ করে যে এই ক্লাসে বরাদ্দ করা উপাদানগুলি কেমন হবে
  • font-size – an example CSS property
  • 18px– a value assigned to the property stap

উপরের ফন্ট-আকার ছাড়াও এক টন CSS বৈশিষ্ট্য রয়েছে।

  1. একটি CSS স্টাইলশীট একসাথে রাখুন।

একটি এইচটিএমএল ডকুমেন্ট খুবই স্ট্রাকচারাল – প্রতিটি উপাদানেরই তার জায়গা আছে এবং প্রশ্নে থাকা ওয়েব পেজের চূড়ান্ত নির্মাণ এবং উপস্থিতির জন্য উপাদানের ক্রম অত্যন্ত গুরুত্বপূর্ণ। একটি CSS নথি অনেক কম.

তাই CSS নথিগুলিকে প্রায়শই স্টাইলশীট হিসাবে উল্লেখ করা হয়। মূলত, একটি CSS স্টাইলশীট হল সংশ্লিষ্ট HTML নথিতে ব্যবহৃত সমস্ত শ্রেণীর সংজ্ঞাগুলির একটি তালিকা। শ্রেণী সংজ্ঞার ক্রমটি বেশিরভাগ সময়ই গুরুত্বপূর্ণ নয় (অন্তত সাধারণ ডিজাইনের জন্য)।

আপনি যেভাবে একটি CSS স্টাইলশীট একসাথে রাখেন তা হল প্রতিটি শ্রেণীকে এক এক করে সংজ্ঞায়িত করা এবং তারপর আপনার পৃষ্ঠা ডিজাইনের ফলাফল আপনি যা চেয়েছিলেন তা কিনা তা পরীক্ষা করা।

এবং এটা ক্লান্তিকর কাজের মত শোনাচ্ছে,

কিন্তু আমরা আপনার জন্য জিনিসগুলিকে আরও সহজ করে তুলব এবং আপনাকে হাত দিয়ে HTML এবং CSS ডিজাইন শিখতে বাধ্য করব না। স্ক্র্যাচ থেকে আপনাকে সবকিছু শেখানোর পরিবর্তে, আমরা একটি জীবন্ত প্রাণী নেব এবং এর উপাদানগুলিকে ব্যবচ্ছেদ করব।

পরর্বতী পর্ব এর জন্য কমেন্ট করুন

Leave a Reply

Your email address will not be published. Required fields are marked *