সিএসএস আইডি বনাম ক্লাস (CSS ID Vs Class)

0
42
css
css

এটা প্রায়ই সন্দেহের সৃষ্টি করে যে কখন আমরা সিএসএস ID ব্যবহার করব আর কখন আমরা সিএসএস Classes ব্যবহার করব।এই অধ্যায়ে এ বিষয়ে পরিস্কার আলোচনা করা হবে।

আইডি নির্বাচক (id  Selector)

একটা এইচটিএমএল এলিমেন্ট এর স্টাইল কেমন হবে এটা ঠিক করার জন্য সিএসএস আপনাকে নিজস্ব সিলেক্টর ব্যাবহারের সুবিধা দেয় এদেরকে বলে “id” এবং “selector”

ID সিলেক্টর একটা (অনন্য) এলিমেন্টের স্টাইল দিতে ব্যাবহৃত হয়। id হল এলিমেন্ট  এর unique identifier ।সিএসএস ID প্রায়ই  সিএসএস classes কাছাকাছি।কিন্তূ তারা এলিমেন্ট এর special case নির্দেশ করে ।

1.p#exampleID1 { background-color: orange; }
2.p#exampleID2 { text-transform: uppercase; }
1.<p id="ExampleID1">This paragraph has an ID name of
2."exampleID1" and has a orange CSS defined background</p>
3.<p id="ExampleID2">This paragraph has an ID name of
4."exampleID2" and has had its text transformed to uppercase letters. </p>

**id নাম সংখ্যা দিয়ে শুরু করবেন না তাহলে এটা মজিলা ফায়ারফক্সে কাজ করবেনা।

প্রদর্শন:

(নোট প্যাডে দেখুন)

This paragraph has an ID name of “exampleID1” and has a orange CSS defined background.

THIS PARAGRAPH HAS AN ID NAME OF “EXAMPLEID2” AND HAS HAD ITS TEXT TRANSFORMED TO UPPERCASE LETTERS.

ক্লাস নির্বাচক (class Selector)

একদল এলিমেন্টের স্টাইল দেয়ার জন্য class selector ব্যাবহৃত হয়।class selector এইচটিএমএল এর class attribute ব্যাবহার করে এবং এটা “.” দিয়ে লেখা (সংঙ্গায়িত) হয়।নিচের উদাহরনে  যেসব এইচটিএমএল এলিমেন্টs এ এটা থাকবে তাদের সকলের Align মাঝখানে হয়ে যাবে।

1..center {text-align:center;}

আপনি ইচ্ছে করলে এইচটিএমএল এর যেকোন একটা এলিমেন্ট ঠিক করে দিতে পারেন যেটা একটা class দ্বারা প্রভাবিত হবে।যেম:

1.p.center {text-align:center;}

**class নাম সংখ্যা দিয়ে শুরু করবেন না তাহলে এটা ইন্টারনেট এক্সপ্লোরার এ কাজ করবেনা।

ID =  একজনের Identification (ID) একজন ব্যক্তির জন্য unique

Class = অনেক জনগণ   একটি class এ পড়ে ।

সিএসএস ক্লাস টিউটোরিয়াল (CSS Class)

সিএসএস এর মাধ্যমে এইচটিএমএল এলিমেন্ট এর অসংখ্য স্টাইল দেয়া যায়। একটা উদাহরন দিয়ে বিষয়টি পরিস্কার করা যাক । ধরুন আপনি কখনও চাচ্ছেন আপনার লেখাটির ফন্ট বড় এবং সাদা হোক।  আবার চাচ্ছেন ছোট এবং কাল হোক। আপনি ভাগ্যবান এই অর্থে যে  সিএসএস classes ব্যবহার করার  মাধ্যমে আপনি আপনার ইচ্ছা পুরন করতে পারেন।

Class এর Format

Class  ব্যবহার করা খুব সাধারন। সাধারন  সিএসএস কোড এর  অংশকে বর্ধিত (extension) করতে হবে। আর এই বর্ধিত অংশকে অবশ্যই এইচটিএমএল ট্যাগ এ Class এর মান হিসাবে বসাতে হবে। নিচে উদাহরন দেয়া হলো:

1.p.first{ color: blue; }
2.p.second{ color: red; }
01.<html>
02.<body>
03.<p>This is a normal paragraph.</p>
04.
05.<p class="first">This is a paragraph that uses the p.first CSS code!</p>
06.<p class="second">This is a paragraph that uses the p.second CSS code!</p>
07.</body>
08.
09.</html>

প্রদর্শন:

(নোট প্যাডে দেখুন)

This is a normal paragraph.

This is a paragraph that uses the p.first CSS code!

This is a paragraph that uses the p.second CSS code!

আপ নি যেকোন এইচটিএমএল এলিমেন্ট এর সাথে সিএসএস class  ব্যবহার করতে পারেন।ধরুন আপনি <p> ট্যাগ ব্যবহার করে স্টাইল দিয়েছেন এবং সিএসএস class ব্যবহার করে অন্য একটি স্টাইল নিদিষ্ট করে দিয়েছেনে ফলে আগের  default স্টাইল টি আর নিদিষ্ট লেখার ঊপর কাজ করবে না।

1.p{ color: red; font-size: 20px; }
2.p.test1{ color: blue; }
3.p.test2{ font-size: 12px; }
1.<html>
2.<body>
3.<p>This is a normal paragraph.</p>
4.<p class="test1">This is a paragraph that uses the p.test1 CSS code!</p>
5.<p class="test2">This is a paragraph that uses the p.test2 CSS code!</p>
6....

প্রদর্শন:

(নোট প্যাডে দেখুন)

This is a normal paragraph.

This is a paragraph that uses the p.test1 CSS code!

This is a paragraph that uses the p.test2 CSS code!

LEAVE A REPLY

Please enter your comment!
Please enter your name here