জয়েন লগইন

সিএসএস

🌈সিএসএস কি?

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

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

সিএসএস সমূহ

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

  • ➡️ accent-color - ফর্ম অ্যাকসেন্টের রঙ নির্ধারণ করা
  • ➡️ all - সমস্ত বৈশিষ্ট রিসেট করা
  • ➡️ aspect-ratio - উচ্চতা এবং প্রস্থ অনুপাত নির্ধারণ করা
  • ➡️ backdrop-filter - পেছনে ফিল্টার প্রয়োগ করা
  • ➡️ backface-visibility - ত্রিমাত্রিক ঘোরানোর সময় নির্ধারণ করা
  • ➡️ block-size - ব্লক আকার নির্ধারণ করা
  • ➡️ position - অবস্থান নির্ধারণ করা
  • ➡️ left - বাম পাশের অবস্থান নির্ধারণ করা
  • ➡️ right - ডান অবস্থান নির্ধারণ করা
  • ➡️ top - উপরের অবস্থান নির্ধারণ করা
  • ➡️ bottom - নিচের অবস্থান নির্ধারণ করা
  • ➡️ caption-side - ক্যাপশনের সাইড অবস্থান নির্ধারণ করা
  • ➡️ caret-color - ক্যারটের রং নির্ধারণ করা
  • ➡️ clear - উপাদানের প্রভাব মুক্ত করা
  • ➡️ clip - উপাদানের ক্লিপ নির্ধারণ করা
  • ➡️ clip-path - উপাদানর ক্লিপ পথ নির্ধারণ করা
  • ➡️ color - রঙের মান নির্ধারণ করা
  • ➡️ color-scheme - রঙের পরিকল্পনা নির্ধারণ করা
  • ➡️ content - কন্টেন যুক্ত করা
  • ➡️ cursor - কার্সর বৈশিষ্ট নির্ধারণ করা
  • ➡️ direction - লেখার দিক নির্ধারণ করা
  • ➡️ display - পদ্ধতি বৈশিষ্ট নির্ধারণ করা
  • ➡️ empty-cells - খালি সেল স্টাইল যুক্ত করা
  • ➡️ filter - ফিল্টার প্রয়োগ নির্ধারণ করা
  • ➡️ float - ভাসমান অবস্থান নির্ধারণ করা
  • ➡️ gap - সারি ও কলামের মধ্যবর্তী ফাঁক নির্ধারণ করা
  • ➡️ height - উচ্চতা নির্ধারণ করা
  • ➡️ image-rendering - ছবি রেন্ডার পদ্ধতি নির্ধারণ করা
  • ➡️ initial-letter - অক্ষরের আকার নির্ধারণ করা
  • ➡️ inline-size - ইনলাইনের আকার নির্ধারণ করা
  • ➡️ isolation - স্ট্যাকিং কনটেক্সট পৃথক করার নিয়ম নির্ধারণ করা
  • ➡️ letter-spacing - অক্ষরের দূরত্ব নির্ধারণ করা
  • ➡️ line-height - লাইনের উচ্চতা নির্ধারণ করা
  • ➡️ object-fit - অবজেক্ট সুনির্দিষ্ট করা
  • ➡️ object-position - অবজেক্ট অবস্থান নির্ধারণ করা
  • ➡️ opacity - স্বচ্ছতার মাত্রা নির্ধারণ করা
  • ➡️ order - আইটেমের প্রদর্শনের ক্রম নির্ধারণ করা
  • ➡️ orphans - পৃষ্ঠা বা কলামের শেষে ন্যূনতম লাইনের সংখ্যা নির্ধারণ করা
  • ➡️ paint-order - অঙ্কনের ক্রম নির্ধারণ করা
  • ➡️ perspective - ত্রিমাত্রিক দৃষ্টিকোণ নির্ধারণ করা
  • ➡️ perspective-origin - দৃষ্টিকোণের উৎসবিন্দু নির্ধারণ করা
  • ➡️ pointer-events - পয়েন্টার ইভেন্টের আচরণ নির্ধারণ করা
  • ➡️ quotes - উদ্ধৃতি চিহ্ন নির্ধারণ করা
  • ➡️ resize - আকার পরিবর্তন নির্ধারণ করা
  • ➡️ rotate - ঘূর্ণনের কোণ নির্ধারণ করা
  • ➡️ row-gap - সারির মধ্যবর্তী ফাঁক নির্ধারণ করা
  • ➡️ scale - আকার পরিবর্তনের অনুপাত নির্ধারণ করা
  • ➡️ tab-size - ট্যাব অক্ষরের আকার নির্ধারণ করা
  • ➡️ table-layout - টেবিলের বিন্যাস নির্ধারণ করা
  • ➡️ translate - স্থানান্তরের মান নির্ধারণ করা
  • ➡️ unicode-bidi - দ্বিমুখী লেখার নিয়ম নির্ধারণ করা
  • ➡️ user-select - লেখা নির্বাচন করার নিয়ম নির্ধারণ করা
  • ➡️ vertical-align - উল্লম্ব সারিবিন্যাস নির্ধারণ করা
  • ➡️ visibility - দৃশ্যমানতা নির্ধারণ করা
  • ➡️ white-space - সাদা স্থানের ব্যবহারের নিয়ম নির্ধারণ করা
  • ➡️ widows - কলামের শুরুতে ন্যূনতম লাইনের সংখ্যা নির্ধারণ করা
  • ➡️ width - প্রস্থ নির্ধারণ করা
  • ➡️ writing-mode - লেখার মোড নির্ধারণ করা
  • ➡️ z-index - স্তরের ক্রম নির্ধারণ করা
  • ➡️ zoom - জুম প্রদর্শনের মাত্রা নির্ধারণ করা

accent-color - ফর্ম অ্যাকসেন্টের রঙ নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
input {
  accent-color: red;
}
</style>
</head>
<body>

<input type="checkbox" checked>

</body>
</html>

all - সমস্ত বৈশিষ্ট রিসেট করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
div {
  all: unset;
  display: block;
  padding: 20px;
  background: lightblue;
}
</style>
</head>
<body>

<div>প্রোগ্রামিং শিখুন</div>

</body>
</html>

aspect-ratio - উচ্চতা এবং প্রস্থ অনুপাত নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  aspect-ratio: 16 / 9;
  background: lightblue;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

backdrop-filter - পেছনে ফিল্টার প্রয়োগ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background: linear-gradient(45deg, pink, tomato);
}

div {
  width: 250px;
  padding: 30px;
  background: rgb(255 255 255 / 30%);
  backdrop-filter: blur(10px);
}
</style>
</head>
<body>

<div>প্রোগ্রামিং শিখুন</div>

</body>
</html>

backface-visibility - ত্রিমাত্রিক ঘোরানোর সময় নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 150px;
  height: 100px;
  background: lightblue;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

block-size - ব্লক আকার নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
div {
  block-size: 150px;
  background: lightblue;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

position - অবস্থান নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
div {
  position: relative;
  width: 200px;
  height: 100px;
  background: lightblue;
}
</style>
</head>
<body>

<div>প্রোগ্রামিং শিখুন</div>

</body>
</html>

left - বাম পাশের অবস্থান নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
div {
  position: relative;
  left: 50px;
  width: 150px;
  padding: 20px;
  background: lightblue;
}
</style>
</head>
<body>

<div>প্রোগ্রামিং শিখুন</div>

</body>
</html>

right - ডান অবস্থান নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
div {
  position: relative;
  right: 30px;
  width: 150px;
  padding: 20px;
  background: lightblue;
}
</style>
</head>
<body>

<div>প্রোগ্রামিং শিখুন</div>

</body>
</html>

top - উপরের অবস্থান নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
div {
  position: relative;
  top: 30px;
  width: 150px;
  padding: 20px;
  background: lightblue;
}
</style>
</head>
<body>

<div>প্রোগ্রামিং শিখুন</div>

</body>
</html>

bottom - নিচের অবস্থান নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
div {
  position: relative;
  bottom: 20px;
  width: 150px;
  padding: 20px;
  background: lightblue;
}
</style>
</head>
<body>

<div>প্রোগ্রামিং শিখুন</div>

</body>
</html>

caption-side - ক্যাপশনের সাইড অবস্থান নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
caption {
  caption-side: bottom;
}
</style>
</head>
<body>

<table border="1">
  <caption>ব্যবহারকারীর তথ্য</caption>
  <tr>
    <th>নাম</th>
    <th>দেশ</th>
  </tr>
  <tr>
    <td>আরিফ</td>
    <td>বাংলাদেশ</td>
  </tr>
</table>

</body>
</html>

caret-color - ক্যারটের রং নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
input {
  caret-color: red;
}
</style>
</head>
<body>

<input value="প্রোগ্রামিং শিখুন">

</body>
</html>

clear - উপাদানের প্রভাব মুক্ত করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: left;
  width: 100px;
  height: 100px;
}

.clear {
  clear: both;
}
</style>
</head>
<body>

<img src="/images/author.jpg">
<p class="clear">প্রোগ্রামিং শিখুন</p>

</body>
</html>

clip - উপাদানের ক্লিপ নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
div {
  position: absolute;
  width: 200px;
  height: 100px;
  background: lightblue;
  clip: rect(0, 100px, 80px, 0);
}
</style>
</head>
<body>

<div></div>

</body>
</html>

clip-path - উপাদানর ক্লিপ পথ নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 50px;
  height: 50px;
  background: lightblue;
  clip-path: circle(50%);
}
</style>
</head>
<body>

<div></div>

</body>
</html>

color - রঙের মান নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: red;
}

p {
  color: blue;
}
</style>
</head>
<body>

<div>
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

color-scheme - রঙের পরিকল্পনা নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
html {
  color-scheme: light dark;
}
</style>
</head>
<body>

<input placeholder="প্রোগ্রামিং শিখুন">

</body>
</html>

content - কন্টেন যুক্ত করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
p::before {
  content: "→ ";
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখুন</p>

</body>
</html>

cursor - কার্সর বৈশিষ্ট নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
button {
  cursor: pointer;
}
</style>
</head>
<body>

<button>এইচটিএমএল</button>

</body>
</html>

direction - লেখার দিক নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
p {
  direction: rtl;
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখুন</p>

</body>
</html>

display - পদ্ধতি বৈশিষ্ট নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
span {
  display: block;
}
</style>
</head>
<body>

<span>প্রোগ্রামিং শিখুন</span>
<span>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</span>

</body>
</html>

empty-cells - খালি সেল স্টাইল যুক্ত করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: separate;
  empty-cells: hide;
}
</style>
</head>
<body>

<table border="1">
  <tr>
    <th>নাম</th>
    <th>দেশ</th>
  </tr>
  <tr>
    <td>তানিম</td>
    <td>সাকিব</td>
  </tr>
  <tr>
    <td>জোহান</td>
    <td></td>
  </tr>
</table>

</body>
</html>

filter - ফিল্টার প্রয়োগ নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
img {
  filter: grayscale(100%);
}
</style>
</head>
<body>

<img src="/images/author.jpg" width="200">

</body>
</html>

float - ভাসমান অবস্থান নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: left;
  width: 100px;
  margin-right: 10px;
}
</style>
</head>
<body>

<img src="/images/author.jpg">
<p>প্রোগ্রামিং শিখুন</p>

</body>
</html>

gap - সারি ও কলামের মধ্যবর্তী ফাঁক নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
ul {
  display: flex;
  list-style: none;
  gap: 20px;
}
</style>
</head>
<body>

<ul>
  <li>পিএইচপি</li>
  <li>জাভা</li>
  <li>পাইথন</li>
  <li>জাভাস্ক্রিপ্ট</li>
</ul>

</body>
</html>

height - উচ্চতা নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 150px;
  background: lightblue;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

image-rendering - ছবি রেন্ডার পদ্ধতি নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 300px;
  image-rendering: pixelated;
}
</style>
</head>
<body>

<img src="/images/author.jpg">

</body>
</html>

initial-letter - অক্ষরের আকার নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  initial-letter: 3;
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখুন</p>

</body>
</html>

inline-size - ইনলাইনের আকার নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
div {
  inline-size: 250px;
  background: lightblue;
}
</style>
</head>
<body>

<div>প্রোগ্রামিং শিখুন</div>

</body>
</html>

isolation - স্ট্যাকিং কনটেক্সট পৃথক করার নিয়ম নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
div {
  isolation: isolate;
  background: lightblue;
  padding: 20px;
}
</style>
</head>
<body>

<div>প্রোগ্রামিং শিখুন</div>

</body>
</html>

letter-spacing - অক্ষরের দূরত্ব নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
p {
  letter-spacing: 5px;
}
</style>
</head>
<body>

<p>এইচটিএমএল</p>

</body>
</html>

line-height - লাইনের উচ্চতা নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
p {
  line-height: 2;
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখুন</p>

</body>
</html>

object-fit - অবজেক্ট সুনির্দিষ্ট করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 150px;
  object-fit: cover;
}
</style>
</head>
<body>

<img src="/images/author.jpg">

</body>
</html>

object-position - অবজেক্ট অবস্থান নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 150px;
  object-fit: cover;
  object-position: right top;
}
</style>
</head>
<body>

<img src="/images/author.jpg">

</body>
</html>

opacity - স্বচ্ছতার মাত্রা নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
div{
  opacity: 0.5;
  background: lightblue;
  padding: 30px;
}
</style>
</head>
<body>

<div>প্রোগ্রামিং শিখুন</div>

</body>
</html>

order - আইটেমের প্রদর্শনের ক্রম নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style: none;
  display: flex;
  gap: 10px;
}

.css {
  order: -1;
}
</style>
</head>
<body>

<ul>
  <li>এইচটিএমএল</li>
  <li class="css">সিএসএস</li>
</ul>

</body>
</html>

orphans - পৃষ্ঠা বা কলামের শেষে ন্যূনতম লাইনের সংখ্যা নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
p {
  orphans: 3;
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখুন</p>

</body>
</html>

paint-order - অঙ্কনের ক্রম নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: white;
  -webkit-text-stroke: 3px blue;
  paint-order: stroke fill;
}
</style>
</head>
<body>

<h1>সিএসএস</h1>

</body>
</html>

perspective - ত্রিমাত্রিক দৃষ্টিকোণ নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
.container {
  perspective: 300px;
}

.box {
  width: 150px;
  height: 100px;
  background: lightblue;
  transform: rotateY(30deg);
}
</style>
</head>
<body>

<div class="container">
  <div class="box"></div>
</div>

</body>
</html>

perspective-origin - দৃষ্টিকোণের উৎসবিন্দু নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
.container {
  perspective: 300px;
  perspective-origin: right top;
}

.box {
  width: 150px;
  height: 100px;
  background: lightblue;
  transform: rotateY(30deg);
}
</style>
</head>
<body>

<div class="container">
  <div class="box"></div>
</div>

</body>
</html>

pointer-events - পয়েন্টার ইভেন্টের আচরণ নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
button {
  pointer-events: none;
}
</style>
</head>
<body>

<button>সিএসএস</button>

</body>
</html>

quotes - উদ্ধৃতি চিহ্ন নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
q {
  quotes: "«" "»";
}
</style>
</head>
<body>

<q>প্রোগ্রামিং শিখুন</q>

</body>
</html>

resize - আকার পরিবর্তন নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
textarea {
  resize: none;
}
</style>
</head>
<body>

<textarea>প্রোগ্রামিং শিখুন</textarea>

</body>
</html>

rotate - ঘূর্ণনের কোণ নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 150px;
  padding: 20px;
  background: lightblue;
  rotate: 40deg;
}
</style>
</head>
<body>

<div>
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

row-gap - সারির মধ্যবর্তী ফাঁক নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: grid;
  row-gap: 20px;
}
</style>
</head>
<body>

<div class="container">
  <div>এইচটিএমএল</div>
  <div>সিএসএস</div>
</div>

</body>
</html>

scale - আকার পরিবর্তনের অনুপাত নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 150px;
  padding: 20px;
  background: lightblue;
  scale: 1.2;
}
</style>
</head>
<body>

<div>প্রোগ্রামিং শিখুন</div>

</body>
</html>

tab-size - ট্যাব অক্ষরের আকার নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
pre {
  tab-size: 4;
}
</style>
</head>
<body>

<pre>এইচটিএমএল সিএসএস</pre>

</body>
</html>

table-layout - টেবিলের বিন্যাস নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
table {
  width: 300px;
  table-layout: fixed;
}
</style>
</head>
<body>

<table border="1">
  <tr>
    <td>এইচটিএমএল</td>
    <td>সিএসএস</td>
  </tr>
</table>

</body>
</html>

translate - স্থানান্তরের মান নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 150px;
  padding: 20px;
  background: lightblue;
  translate: 30px 20px;
}
</style>
</head>
<body>

<div>প্রোগ্রামিং শিখুন</div>

</body>
</html>

unicode-bidi - দ্বিমুখী লেখার নিয়ম নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
p {
  direction: rtl;
  unicode-bidi: bidi-override;
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখুন</p>

</body>
</html>

user-select - লেখা নির্বাচন করার নিয়ম নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
p {
  user-select: none;
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখুন</p>

</body>
</html>

vertical-align - উল্লম্ব সারিবিন্যাস নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
span {
  vertical-align: super;
}
</style>
</head>
<body>

<p>এইচটিএমএল<span>সিএসএস</span></p>

</body>
</html>

visibility - দৃশ্যমানতা নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
div {
  visibility: hidden;
}
</style>
</head>
<body>

<div>সিএসএস</div>

</body>
</html>

white-space - সাদা স্থানের ব্যবহারের নিয়ম নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
p {
  white-space: nowrap;
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখুন</p>

</body>
</html>

widows - কলামের শুরুতে ন্যূনতম লাইনের সংখ্যা নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
p {
  widows: 3;
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখুন</p>

</body>
</html>

width - প্রস্থ নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 250px;
  background: lightblue;
}
</style>
</head>
<body>

<div>প্রোগ্রামিং শিখুন</div>

</body>
</html>

writing-mode - লেখার মোড নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
p {
  writing-mode: vertical-rl;
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখুন</p>

</body>
</html>

z-index - স্তরের ক্রম নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
.tomato,
.orange {
  position: absolute;
  width: 100px;
  height: 100px;
}

.tomato {
  background: tomato;
  z-index: 1;
}

.orange {
  background: orange;
  left: 50px;
  top: 50px;
}
</style>
</head>
<body>

<div class="tomato"></div>
<div class="orange"></div>

</body>
</html>

zoom - জুম প্রদর্শনের মাত্রা নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<style>
div {
  zoom: 1.5;
  width: 150px;
  padding: 20px;
  background: lightblue;
}
</style>
</head>
<body>

<div>প্রোগ্রামিং শিখুন</div>

</body>
</html>

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

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

নাম বিবরণ
accent-color ফর্ম অ্যাকসেন্টের রঙ নির্ধারণ করতে ব্যবহৃত হয়।
all সমস্ত বৈশিষ্ট রিসেট করতে ব্যবহৃত হয়।
aspect-ratio উচ্চতা এবং প্রস্থ অনুপাত নির্ধারণ করতে ব্যবহৃত হয়।
backdrop-filter পেছনে ফিল্টার প্রয়োগ করতে ব্যবহৃত হয়।
backface-visibility ত্রিমাত্রিক ঘোরানোর সময় নির্ধারণ করতে ব্যবহৃত হয়।
block-size ব্লক আকার নির্ধারণ করতে ব্যবহৃত হয়।
position অবস্থান নির্ধারণ করতে ব্যবহৃত হয়।
left বাম পাশের অবস্থান নির্ধারণ করতে ব্যবহৃত হয়।
right ডান অবস্থান নির্ধারণ করতে ব্যবহৃত হয়।
top উপরের অবস্থান নির্ধারণ করতে ব্যবহৃত হয়।
bottom নিচের অবস্থান নির্ধারণ করতে ব্যবহৃত হয়।
caption-side ক্যাপশনের সাইড অবস্থান নির্ধারণ করতে ব্যবহৃত হয়।
caret-color ক্যারটের রং নির্ধারণ করতে ব্যবহৃত হয়।
clear উপাদানের প্রভাব মুক্ত করতে ব্যবহৃত হয়।
clip উপাদানের ক্লিপ নির্ধারণ করতে ব্যবহৃত হয়।
clip-path উপাদানর ক্লিপ পথ নির্ধারণ করতে ব্যবহৃত হয়।
color রঙের মান নির্ধারণ করতে ব্যবহৃত হয়।
color-scheme রঙের পরিকল্পনা নির্ধারণ করতে ব্যবহৃত হয়।
content কন্টেন যুক্ত করতে ব্যবহৃত হয়।
cursor কার্সর বৈশিষ্ট নির্ধারণ করতে ব্যবহৃত হয়।
direction লেখার দিক নির্ধারণ করতে ব্যবহৃত হয়।
display পদ্ধতি বৈশিষ্ট নির্ধারণ করতে ব্যবহৃত হয়।
empty-cells খালি সেল স্টাইল যুক্ত করতে ব্যবহৃত হয়।
filter ফিল্টার প্রয়োগ নির্ধারণ করতে ব্যবহৃত হয়।
float ভাসমান অবস্থান নির্ধারণ করতে ব্যবহৃত হয়।
gap সারি ও কলামের মধ্যবর্তী ফাঁক নির্ধারণ করতে ব্যবহৃত হয়।
height উচ্চতা নির্ধারণ করতে ব্যবহৃত হয়।
image-rendering ছবি রেন্ডার পদ্ধতি নির্ধারণ করতে ব্যবহৃত হয়।
initial-letter অক্ষরের আকার নির্ধারণ করতে ব্যবহৃত হয়।
inline-size ইনলাইনের আকার নির্ধারণ করতে ব্যবহৃত হয়।
isolation স্ট্যাকিং কনটেক্সট পৃথক করার নিয়ম নির্ধারণ করতে ব্যবহৃত হয়।
letter-spacing অক্ষরের দূরত্ব নির্ধারণ করতে ব্যবহৃত হয়।
line-height লাইনের উচ্চতা নির্ধারণ করতে ব্যবহৃত হয়।
object-fit অবজেক্ট সুনির্দিষ্ট করতে ব্যবহৃত হয়।
object-position অবজেক্ট অবস্থান নির্ধারণ করতে ব্যবহৃত হয়।
opacity স্বচ্ছতার মাত্রা নির্ধারণ করতে ব্যবহৃত হয়।
order আইটেমের প্রদর্শনের ক্রম নির্ধারণ করতে ব্যবহৃত হয়।
orphans পৃষ্ঠা বা কলামের শেষে ন্যূনতম লাইনের সংখ্যা নির্ধারণ করতে ব্যবহৃত হয়।
paint-order অঙ্কনের ক্রম নির্ধারণ করতে ব্যবহৃত হয়।
perspective ত্রিমাত্রিক দৃষ্টিকোণ নির্ধারণ করতে ব্যবহৃত হয়।
perspective-origin দৃষ্টিকোণের উৎসবিন্দু নির্ধারণ করতে ব্যবহৃত হয়।
pointer-events পয়েন্টার ইভেন্টের আচরণ নির্ধারণ করতে ব্যবহৃত হয়।
quotes উদ্ধৃতি চিহ্ন নির্ধারণ করতে ব্যবহৃত হয়।
resize আকার পরিবর্তন নির্ধারণ করতে ব্যবহৃত হয়।
rotate ঘূর্ণনের কোণ নির্ধারণ করতে ব্যবহৃত হয়।
row-gap সারির মধ্যবর্তী ফাঁক নির্ধারণ করতে ব্যবহৃত হয়।
scale আকার পরিবর্তনের অনুপাত নির্ধারণ করতে ব্যবহৃত হয়।
tab-size ট্যাব অক্ষরের আকার নির্ধারণ করতে ব্যবহৃত হয়।
table-layout টেবিলের বিন্যাস নির্ধারণ করতে ব্যবহৃত হয়।
translate স্থানান্তরের মান নির্ধারণ করতে ব্যবহৃত হয়।
unicode-bidi দ্বিমুখী লেখার নিয়ম নির্ধারণ করতে ব্যবহৃত হয়।
user-select লেখা নির্বাচন করার নিয়ম নির্ধারণ করতে ব্যবহৃত হয়।
vertical-align উল্লম্ব সারিবিন্যাস নির্ধারণ করতে ব্যবহৃত হয়।
visibility দৃশ্যমানতা নির্ধারণ করতে ব্যবহৃত হয়।
white-space সাদা স্থানের ব্যবহারের নিয়ম নির্ধারণ করতে ব্যবহৃত হয়।
widows কলামের শুরুতে ন্যূনতম লাইনের সংখ্যা নির্ধারণ করতে ব্যবহৃত হয়।
width প্রস্থ নির্ধারণ করতে ব্যবহৃত হয়।
writing-mode লেখার মোড নির্ধারণ করতে ব্যবহৃত হয়।
z-index স্তরের ক্রম নির্ধারণ করতে ব্যবহৃত হয়।
zoom জুম প্রদর্শনের মাত্রা নির্ধারণ করতে ব্যবহৃত হয়।