Awesome! টিউনস
সকল Awesome! টিউনস

সিএসএস টিউটোরিয়াল – ID & Class

1,749 দেখা 1 টিউমেন্টস জোসস
টিউন বিভাগ সিএসএস
প্রকাশিত
Level 0

224 টিউনস 1487 টিউমেন্টস 5 ফলোয়ার

সিএসএস নিয়ে লেখা প্রথম টিউটোরিয়ালটিঃ সিএসএস টিউটোরিয়াল – সূচনা

এইচটিএমএল এর ট্যাগ গুলোর জন্য আলাদা করে স্টাইল রুল লেখার পাশা পাশি  CSS এ ID এবং Class দিয়ে আমাদের নিজস্ব selector তৈরি করতে পারি। পরে এই selector গুলো যেকোন এইচটিএমএল ট্যাগ/element এর মধ্যে ব্যবহার করতে পারি।

ID দিয়ে এইচটিএমএল এর একটি নির্দিষ্ট ইলিম্যান্টকে স্টাইল দেওয়ার কাজে ব্যবহৃত হয়।

  • একটি ইলিম্যান্ট এর জন্য একটি মাত্র ID ব্যবহার করা যায়।
  • একটি ID একটি পেইজে মাত্র একবার ব্যবহার করা যায়।

সিএসএস এ id এর রুল গুলো লেখা শুরু করার আগে # চিহ্ন দিতে হয় তারপর id এর নাম এবং শেষে দ্বিতীয় ব্র্যাকেটের মধ্যে সিএসএস রুল গুলো লিখতে হয়, যেমনঃ


#myid{

font-size:20px;
color:blue;

...

}

সিএসএস এ লেখা id যেকোন এইচটিএমএল ইলিম্যান্ট  এ সেট করার  জন্য  এইচটিএমএল এর অপেনিং ট্যাগ এর মধ্যে লিখতে হয়। এবং লেখা হয় id="idname" দিয়ে। যেমনঃ


<h1 id="myid">... </h1>

উদাহরনঃ উদাহরনটি দেখতে চাইলে এখানে ক্লিক করে দেখতে পারেন। 

বিদ্রঃ আমরা সম সময়  উদাহরন হিসেবে Internal style sheet ব্যবহার করব।

কোড গুলোঃ


<!DOCTYPE html>
<head>
<title>ID Example</title>
 <style>
 p {
 color:red;
 }
 #myid {
 color:blue;
 }
 </style>
</head>

<body>
<h1> Hello web! </h1>
<p>This is a paragraph </p>
<p id="myid">This is another paragraph with an id </p>
<p>This is another paragraph with an id </p>
</body>
</html>

উপরের উদাহরনে সব গুলো p ট্যাগ এর রঙ হচ্ছে লাল। কিন্তু আমরা চাচ্ছি যে একটা p ট্যাগ এর রঙ হবে নীল। তাই আমরা p ট্যাগ এর রঙ নীল দিতে চাই তার জন্য একটা id লিখলাম myid দিয়ে। এবং ঐ p ট্যাগ এর মধ্যে id="myid" দিয়ে সেট করলাম।

অপর দিকে class দিয়ে একের অধিক ইলিম্যান্টকে স্টাইল দেওয়া যায়।

  • একই class একের অধিক ইলিম্যান্ট এর মধ্যে থাকতে পারে।
  • একই ইলিম্যান্ট এর একের অধিক class থাকতে পারে।

সিএসএস এ class এর রুল গুলো লেখা শুরু করার আগে . [ডট] চিহ্ন দিতে হয় তারপর class এর নাম এবং শেষে দ্বিতীয় ব্র্যাকেটের মধ্যে সিএসএস রুল গুলো লিখতে হয়, যেমনঃ


.myclass{

text-align:center;
color:blue;

...

}

সিএসএস এ লেখা class যেকোন এইচটিএমএল ইলিম্যান্ট  এ সেট করার জন্জয ন্য  এইচটিএমএল এর অপেনিং ট্যাগ এর মধ্যে লিখতে হয়। এবং লেখা হয় class="classname" দিয়ে। যেমনঃ


<p class="myclass">... </p>

আমরা আগেই জানলাম যে একই class একের অধিক ইলিম্যান্ট এ যোগ করা যায়। যেমনঃ


<h1 class="myclass"> .... </h1>

<p  class="myclass"> .... </p>

<h3  class="myclass"> .... </h3>

আবার একের অধিক ক্লাস একই ইলিম্যান্ট এ যোগ করা যায়, আর তার জন্য শুধু মাত্র স্পেস দিয়ে দ্বিতীয় class লিখতে হয়। এভাবে একের অধিক যত গুলো ইচ্ছে তত গুলো লেখা যায়। এর ফলে সব গুলো class এ যত গুলো স্টাইল রুল রয়েছে সব গুলোই ঐ ট্যাগ এ প্রয়োগ হবে।    যেমনঃ


<p  class="myclass myclass2"> .... </p>

<p  class="myclass myclass2 myclass3"> .... </p>

উদাহরনঃ উদাহরনটি দেখতে চাইলে এখানে ক্লিক করে দেখতে পারেন। 

কোড গুলোঃ


<!DOCTYPE html>
<head>
<title>ID Example</title>
 <style>
 p {
 color:red;
 }
 .myclass {
 color:blue;
 }

.myclass2 {
 font-size:20px;
 font-weight:bold;
 }
 </style>
</head>

<body>
<h1> Hello web! </h1>
<p>This is a paragraph </p>
<p class="myclass">This is another paragraph with a class </p>
<p>This is another paragraph </p>
<p class="myclass2">This is another paragraph with another class </p>
<p class="myclass myclass2">This is a paragraph with two class</p>

</body>
</html>

উপরে আমরা myclass একটা p ট্যাগ এ সেট করছি। যার রঙ হচ্ছে নীল [color:blue;] ।  আরেকটি class - myclass2 এর ফন্ট সাইজ হচ্ছে ২০ পিক্সেল এবং তা বোল্ড।  [font-size:20px; font-weight:bold;]  তাই এর ভেতরের লেখা গুলোকে বড় করে দেখতে পাচ্ছি।

এবং সবার শেষে আমরা একটি p ট্যাগ এ এক সাথে দুটি class সেট করলাম। তার পরে দুইটি class এ যত গুলো স্টাইল রুল রয়েছে সব গুলোই এ p ট্যাগ এ প্রয়োগ হয়েছে।

Level 0

আমি জাকির হোসাইন। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর 8 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 224 টি টিউন ও 1487 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 5 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

পৃথিবীতে অল্পকয়েক দিনের জন্য অনেকেই আসে, হেঁটে খেলে চলে যায়। এর মধ্যে অল্প কয়েক জনই পায়ের চাপ রেখে যায়।ওদের একজন হতে ইচ্ছে করে। প্রযুক্তির আরেকটি সেরা ব্লগ টেকটুইটস। আপনাদের স্বাগতম, যেখানে প্রতিটি বন্ধুর অংশ গ্রহনে গড়ে উঠেছে একটি পরিবার। আপনাদের পছন্দ হবে আশা করি। ফেসবুকে আমি - ?জাকির!

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস

Level 0

ওহ দাদু । তুমিতো এডমান্স ইউজারের জন্য দিছো । আমাগো কিহবে