উদাহরণ ১: সাধারণ আইডি দিয়ে স্টাইলিং

একটি id ব্যবহার করে একটি নির্দিষ্ট ডিভ স্টাইল করা।

কোড:

<style>
    #highlight-section {
        background-color: #e6f3ff;
        border: 1px solid #3498db;
        padding: 10px;
        border-radius: 5px;
    }
</style>
<div id="highlight-section">এটি একটি হাইলাইট করা সেকশন।</div>
        

ব্যাখ্যা: #highlight-section আইডি দিয়ে ডিভে ব্যাকগ্রাউন্ড এবং বর্ডার যোগ করা হয়েছে।

উদাহরণ ২: আইডি দিয়ে জাভাস্ক্রিপ্ট ম্যানিপুলেশন

একটি বোতামে ক্লিক করে আইডি ব্যবহার করে টেক্সট পরিবর্তন।

কোড:

<style>
    #alert-box {
        background-color: #fff3cd;
        border: 1px solid #856404;
        padding: 10px;
        border-radius: 5px;
        color: #856404;
    }
</style>
<div id="alert-box">এটি একটি সতর্কতা বার্তা।</div>
<button onclick="changeText()">টেক্সট পরিবর্তন করুন</button>
<script>
    function changeText() {
        document.getElementById("alert-box").innerHTML = "টেক্সট পরিবর্তিত হয়েছে!";
    }
</script>
        

ব্যাখ্যা: document.getElementById দিয়ে alert-box আইডির ডিভের টেক্সট পরিবর্তন করা হয়েছে।

উদাহরণ ৩: আইডি দিয়ে অ্যাঙ্কর লিঙ্ক

আইডি ব্যবহার করে পেজের নির্দিষ্ট অংশে নেভিগেশন।

(নিচে স্ক্রল করার জন্য কিছু স্পেস)

কোড:

<a href="#highlight-section">হাইলাইট সেকশনে যান</a>
<p style="margin-top: 400px;">(নিচে স্ক্রল করার জন্য কিছু স্পেস)</p>
<div id="highlight-section">এটি হাইলাইট করা সেকশন।</div>
        

ব্যাখ্যা: href="#highlight-section" দিয়ে পেজের নির্দিষ্ট আইডির অংশে স্ক্রল করা হয়।

উদাহরণ ৪: আইডি এবং ক্লাসের সমন্বয়

একটি উপাদানে আইডি এবং ক্লাস একসাথে ব্যবহার।

কোড:

<style>
    #custom-button {
        display: inline-block;
        background-color: #3498db;
        color: white;
        padding: 8px 15px;
        text-decoration: none;
        border-radius: 5px;
    }
    #custom-button:hover {
        background-color: #2980b9;
    }
    .button {
        /* অন্যান্য স্টাইল */
    }
</style>
<a href="#" id="custom-button" class="button">কাস্টম বোতাম</a>
        

ব্যাখ্যা: id নির্দিষ্ট স্টাইলিং এবং class পুনরায় ব্যবহারযোগ্য স্টাইলের জন্য ব্যবহৃত হয়েছে।