সিএসএস

🌈সিএসএস কি?

📋সিএসএস হলো অবস্থান নির্দিষ্ট করার পদ্ধতি।

⚒️সিএসএস অবস্থান নির্দিষ্ট করতে ব্যবহৃত হয়।

সিএসএস সমূহ

সিএসএস এবং সেগুলোর ব্যবহারের তালিকা

➡️ inset - ইনসেটের বৈশিষ্ট্য নির্ধারণ করা
➡️ inset-inline - ইনসেটের ইনলাইনে অবস্থান নির্ধারণ করা
➡️ inset-block - ব্লক দিকের অবস্থান নির্ধারণ করা
➡️ inset-inline-start - ইনসেটের ইনলাইনের শুরুতে অবস্থান নির্ধারণ করা
➡️ inset-inline-end - ইনসেটের ইনলাইনের শেষে অবস্থান নির্ধারণ করা
➡️ inset-block-start - ইনসেটের শুরুতে অবস্থান নির্ধারণ করা
➡️ inset-block-end - ইনসেটের শেষে অবস্থান নির্ধারণ করা

inset - ইনসেটের বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parent {
  position: relative;
  border: 1px solid red;
  height: 150px;
  width: 200px;
}

.child {
  position: absolute;
  background-color: pink;
  inset: 20px;
}
</style>
</head>
<body>
<div class="parent">
  <div class="child">
    <p>প্রোগ্রামিং শিখুন - প্রোগ্রামিং দিয়ে আপনার ক্যারিয়ার গড়ুন</p>
  </div>
</div>
</body>
</html>

inset-inline - ইনসেটের ইনলাইনে অবস্থান নির্ধারণ করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parent {
  position: relative;
  border: 1px solid red;
  height: 100px;
  width: 200px;
}

.child {
  position: absolute;
  background-color: pink;
  inset-inline: 20px;
}
</style>
</head>
<body>
<div class="parent">
  <div class="child">
    <p>প্রোগ্রামিং শিখুন - প্রোগ্রামিং দিয়ে আপনার ক্যারিয়ার গড়ুন</p>
</div>
</div>
</body>
</html>

inset-block - ব্লক দিকের অবস্থান নির্ধারণ করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parent {
  position: relative;
  border: 1px solid red;
  height: 100px;
  width: 200px;
}

.child {
  position: absolute;
  background-color: pink;
  inset-block: 20px;
}
</style>
</head>
<body>
<div class="parent">
  <div class="child">
    <p>প্রোগ্রামিং শিখুন - প্রোগ্রামিং দিয়ে আপনার ক্যারিয়ার গড়ুন</p>
</div>
</div>
</body>
</html>

inset-inline-start - ইনসেটের ইনলাইনের শুরুতে অবস্থান নির্ধারণ করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parent {
  position: relative;
  border: 1px solid red;
  height: 100px;
  width: 200px;
}

.child {
  position: absolute;
  background-color: pink;
  inset-inline-start: 20px;
}
</style>
</head>
<body>
<div class="parent">
  <div class="child">
    <p>প্রোগ্রামিং শিখুন - প্রোগ্রামিং দিয়ে আপনার ক্যারিয়ার গড়ুন</p>
</div>
</div>
</body>
</html>

inset-inline-end - ইনসেটের ইনলাইনের শেষে অবস্থান নির্ধারণ করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parent {
  position: relative;
  border: 1px solid red;
  height: 100px;
  width: 200px;
}

.child {
  position: absolute;
  background-color: pink;
  inset-inline-end: 20px;
}
</style>
</head>
<body>
<div class="parent">
  <div class="child">
    <p>প্রোগ্রামিং শিখুন - প্রোগ্রামিং দিয়ে আপনার ক্যারিয়ার গড়ুন</p>
</div>
</div>
</body>
</html>

inset-block-start - ইনসেটের শুরুতে অবস্থান নির্ধারণ করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parent {
  position: relative;
  border: 1px solid red;
  height: 100px;
  width: 200px;
}

.child {
  position: absolute;
  background-color: pink;
  inset-block-start: 20px;
}
</style>
</head>
<body>
<div class="parent">
  <div class="child">
    <p>প্রোগ্রামিং শিখুন - প্রোগ্রামিং দিয়ে আপনার ক্যারিয়ার গড়ুন</p>
</div>
</div>
</body>
</html>

inset-block-end - ইনসেটের শেষে অবস্থান নির্ধারণ করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parent {
  position: relative;
  border: 1px solid red;
  height: 100px;
  width: 200px;
}

.child {
  position: absolute;
  background-color: pink;
  inset-block-end: 20px;
}
</style>
</head>
<body>
<div class="parent">
  <div class="child">
    <p>প্রোগ্রামিং শিখুন - প্রোগ্রামিং দিয়ে আপনার ক্যারিয়ার গড়ুন</p>
</div>
</div>
</body>
</html>

সিএসএস সম্পর্কিত বিস্তারিত তথ্য

কার্যকর কোডিং উদাহরণ এবং সেগুলোর রেফারেন্স লিংক

নাম	বিবরণ
inset	ইনসেটের বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়।
inset-inline	ইনসেটের ইনলাইনে অবস্থান নির্ধারণ করতে ব্যবহৃত হয়।
inset-block	ব্লক দিকের অবস্থান নির্ধারণ করতে ব্যবহৃত হয়।
inset-inline-start	ইনসেটের ইনলাইনের শুরুতে অবস্থান নির্ধারণ করতে ব্যবহৃত হয়।
inset-inline-end	ইনসেটের ইনলাইনের শেষে অবস্থান নির্ধারণ করতে ব্যবহৃত হয়।
inset-block-start	ইনসেটের শুরুতে অবস্থান নির্ধারণ করতে ব্যবহৃত হয়।
inset-block-end	ইনসেটের শেষে অবস্থান নির্ধারণ করতে ব্যবহৃত হয়।