উদাহরণ ১: সাধারণ ক্লাস ব্যবহার

একটি ক্লাস ব্যবহার করে প্যারাগ্রাফ স্টাইল করা।

এটি একটি হাইলাইট করা প্যারাগ্রাফ।

কোড:

<style>
    .highlight {
        background-color: #e6f3ff;
        border: 1px solid #3498db;
        padding: 10px;
        border-radius: 5px;
    }
</style>
<p class="highlight">এটি একটি হাইলাইট করা প্যারাগ্রাফ।</p>
        

ব্যাখ্যা: .highlight ক্লাস দিয়ে প্যারাগ্রাফে ব্যাকগ্রাউন্ড এবং বর্ডার যোগ করা হয়েছে।

উদাহরণ ২: একাধিক উপাদানে একই ক্লাস

একই ক্লাস ব্যবহার করে একাধিক উপাদান স্টাইল করা।

এটি আরেকটি সতর্কতা বার্তা।

কোড:

<style>
    .alert {
        background-color: #fff3cd;
        border: 1px solid #856404;
        padding: 10px;
        border-radius: 5px;
        color: #856404;
    }
</style>
<div class="alert">এটি একটি সতর্কতা বার্তা।</div>
<p class="alert">এটি আরেকটি সতর্কতা বার্তা।</p>
        

ব্যাখ্যা: .alert ক্লাস দিয়ে দুটি ভিন্ন উপাদানে একই স্টাইল প্রয়োগ করা হয়েছে।

উদাহরণ ৩: একাধিক ক্লাস ব্যবহার

একটি উপাদানে একাধিক ক্লাস যোগ করা।

কোড:

<style>
    .button {
        display: inline-block;
        background-color: #3498db;
        color: white;
        padding: 8px 15px;
        text-decoration: none;
        border-radius: 5px;
    }
    .button:hover {
        background-color: #2980b9;
    }
    .highlight {
        background-color: #e6f3ff;
        border: 1px solid #3498db;
        padding: 10px;
        border-radius: 5px;
    }
</style>
<a href="#" class="button highlight">ক্লিক করুন</a>
        

ব্যাখ্যা: button এবং highlight ক্লাস দুটি একসাথে একটি লিঙ্কে প্রয়োগ করা হয়েছে।

উদাহরণ ৪: ফ্লেক্সবক্সের সাথে ক্লাস

ফ্লেক্সবক্স ব্যবহার করে ক্লাস দিয়ে লেআউট তৈরি।

কোড:

<style>
    .flex-container {
        display: flex;
        gap: 10px;
        margin: 10px 0;
    }
    .flex-item {
        flex: 1;
        background-color: #2d3436;
        color: white;
        padding: 10px;
        text-align: center;
        border-radius: 5px;
    }
</style>
<div class="flex-container">
    <div class="flex-item">আইটেম ১</div>
    <div class="flex-item">আইটেম ২</div>
    <div class="flex-item">আইটেম ৩</div>
</div>
        

ব্যাখ্যা: flex-container এবং flex-item ক্লাস দিয়ে ফ্লেক্সবক্স লেআউট তৈরি করা হয়েছে।