কম্পিউটার টিউটোরিয়াল

CSS দিয়ে লেবেল স্টাইল করার পদ্ধতি


উদাহরণ

নিচের কোডটি CSS ব্যবহার করে ভিন্ন রঙের লেবেল/ব্যাজ তৈরি করার পদ্ধতি দেখায়:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    margin: 20px;
}
span {
    font-size: 18px;
    font-weight: 600;
    color: white;
    padding: 8px;
}
.success {
    background-color: #4caf50;
}
.info {
    background-color: #2196f3;
}
.warning {
    background-color: #ff9800;
}
.danger {
    background-color: #f44336;
}
.other {
    background-color: #e7e7e7;
    color: black;
}
</style>
</head>
<body>
<h1>Labels Example</h1>
<span class="success">Success</span>
<span class="info">Info</span>
<span class="warning">Warning</span>
<span class="danger">Danger</span>
<span class="other">Other</span>
</body>
</html>

আউটপুট

উপরোক্ত কোড নিচের আউটপুটটি তৈরি করবে:

CSS দিয়ে লেবেল স্টাইল করার পদ্ধতি


  1. CSS দিয়ে HR এলিমেন্ট স্টাইল করার পদ্ধতি

  2. CSS দিয়ে স্ক্রোলবার লুকানো

  3. CSS দিয়ে অ্যারো (Arrow) তৈরি

  4. CSS দিয়ে হেডার (Header) স্টাইল করা