Delete
Setting
Add New Item
Menu List
Title | Content Type | Order | Action | ||||||
---|---|---|---|---|---|---|---|---|---|
{{kb_content.name}} {{kb_content.name}} | {{setValue(content_types, kb_content.content_type)}} | {{kb_content.sort_order}} | Preview Edit Edit Content | ||||||
{{kb_content.name}} | {{setValue(content_types, kb_content.content_type)}} | {{kb_content.sort_order}} | Preview Edit Edit Content | ||||||
No record |
HTML ID and Class
এইচটিএমএল টিউটোরিয়াল টি টিউটোরিয়াল HTML এর প্রাথমিক এবং উন্নত ধারণা সরবরাহ করে। আমাদের এইচটিএমএল টিউটোরিয়ালটি নতুন এবং পেশাদারদের জন্য তৈরি। আমাদের টিউটোরিয়ালে, প্রতিটি বিষয়কে ধাপে ধাপে দেওয়া হয় যাতে আপনি এটি খুব সহজ উপায়ে শিখতে পারেন। আপনি যদি এইচটিএমএল শেখার ক্ষেত্রে নতুন হন তবে আপনি প্রাথমিক থেকে একটি পেশাদার পর্যায়ে এইচটিএমএল শিখতে পারবেন এবং সিএসএস এবং জাভাস্ক্রিপ্টের সাহায্যে এইচটিএমএল শিখার পরে আপনি নিজের ইন্টারেক্টিভ এবং গতিশীল ওয়েবসাইট তৈরি করতে সক্ষম হবেন। তবে এখন আমরা এই টিউটোরিয়ালে কেবল এইচটিএমএলকে কেন্দ্র করব।
HTML ID and Class
ID
ID দিয়ে এইচটিএমএল এর একটি নির্দিষ্ট ইলিম্যান্টকে স্টাইল দেওয়ার কাজে ব্যবহৃত হয়।
- একটি ইলিম্যান্ট এর জন্য একটি মাত্র ID ব্যবহার করা যায়।
- একটি ID একটি পেইজে মাত্র একবার ব্যবহার করা যায়।
সিএসএস এ id এর রুল গুলো লেখা শুরু করার আগে # চিহ্ন দিতে হয় তারপর id এর নাম এবং শেষে দ্বিতীয় ব্র্যাকেটের মধ্যে সিএসএস রুল গুলো লিখতে হয়
উদাহরন:
<!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>
Class
অপর দিকে class দিয়ে একের অধিক ইলিম্যান্টকে স্টাইল দেওয়া যায়।
- একই class একের অধিক ইলিম্যান্ট এর মধ্যে থাকতে পারে।
- একই ইলিম্যান্ট এর একের অধিক class থাকতে পারে।
সিএসএস এ class এর রুল গুলো লেখা শুরু করার আগে . [ডট] চিহ্ন দিতে হয় তারপর class এর নাম এবং শেষে দ্বিতীয় ব্র্যাকেটের মধ্যে সিএসএস রুল গুলো লিখতে হয়
উদাহরন:
<!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>