সিএসএস
🌈সিএসএস কি?
📋সিএসএস হলো সীমানা নির্দিষ্ট করার পদ্ধতি।
⚒️সিএসএস সীমানা নির্দিষ্ট করতে ব্যবহৃত হয়।
সিএসএস সমূহ
সিএসএস এবং সেগুলোর ব্যবহারের তালিকা
- ➡️ border - বর্ডারের বৈশিষ্ট্য নির্ধারণ করা
- ➡️ border-left - বাম বর্ডারের বৈশিষ্ট্য নির্ধারণ করা
- ➡️ border-right - ডান বর্ডারের বৈশিষ্ট্য নির্ধারণ করা
- ➡️ border-top - উপরের বর্ডারের বৈশিষ্ট্য নির্ধারণ করা
- ➡️ border-bottom - নিচের বর্ডারের বৈশিষ্ট্য নির্ধারণ করা
- ➡️ border-block - ব্লক বর্ডারের বৈশিষ্ট্য নির্ধারণ করা
- ➡️ border-inline - ইনলাইন বর্ডারের বৈশিষ্ট্য নির্ধারণ করা
- ➡️ border-inline-start - ইনলাইনের শুরু বর্ডারের বৈশিষ্ট্য নির্ধারণ করা
- ➡️ border-inline-end - ইনলাইনের শেষ বর্ডারের বৈশিষ্ট্য নির্ধারণ করা
- ➡️ border-block-start - ব্লকের শুরু বর্ডারের বৈশিষ্ট্য নির্ধারণ করা
- ➡️ border-block-end - ব্লকের শেষ বর্ডারের বৈশিষ্ট্য নির্ধারণ করা
- ➡️ border-color - বর্ডারের রং নির্ধারণ করা
- ➡️ border-left-color - বাম বর্ডারের রং নির্ধারণ করা
- ➡️ border-right-color - ডান বর্ডারের রং নির্ধারণ করা
- ➡️ border-top-color - উপরের বর্ডারের রং নির্ধারণ করা
- ➡️ border-bottom-color - নিচের বর্ডারের রং নির্ধারণ করা
- ➡️ border-inline-color - ইনলাইন বর্ডারের রং নির্ধারণ করা
- ➡️ border-block-color - ব্লক বর্ডারের রং নির্ধারণ করা
- ➡️ border-width - বর্ডারের প্রস্থ নির্ধারণ করা
- ➡️ border-left-width - বাম বর্ডারের প্রস্থ নির্ধারণ করা
- ➡️ border-right-width - ডান বর্ডারের প্রস্থ নির্ধারণ করা
- ➡️ border-top-width - উপরের বর্ডারের প্রস্থ নির্ধারণ করা
- ➡️ border-bottom-width - নিচের বর্ডারের প্রস্থ নির্ধারণ করা
- ➡️ border-inline-width - ইনলাইন বর্ডারের প্রস্থ নির্ধারণ করা
- ➡️ border-block-width - ব্লক বর্ডারের প্রস্থ নির্ধারণ করা
border - বর্ডারের বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 4px solid;
}
p {
border: 4px dotted;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-left - বাম বর্ডারের বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-left: 4px solid;
}
p {
border-left: 4px dotted;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-right - ডান বর্ডারের বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-right: 4px solid;
}
p {
border-right: 4px dotted;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-top - উপরের বর্ডারের বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-top: 4px solid;
}
p {
border-top: 4px dotted;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-bottom - নিচের বর্ডারের বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-bottom: 4px solid;
}
p {
border-bottom: 4px dotted;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-block - ব্লক বর্ডারের বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-block: 4px solid;
}
p {
border-block: 4px dotted;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-inline - ইনলাইন বর্ডারের বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-inline: 4px solid;
}
p {
border-inline: 4px dotted;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-inline-start - ইনলাইনের শুরু বর্ডারের বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-inline-start: 4px solid;
}
p {
border-inline-start: 4px dotted;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-inline-end - ইনলাইনের শেষ বর্ডারের বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-inline-end: 4px solid;
}
p {
border-inline-end: 4px dotted;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-block-start - ব্লকের শুরু বর্ডারের বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-block-start: 4px solid;
}
p {
border-block-start: 4px dotted;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-block-end - ব্লকের শেষ বর্ডারের বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-block-end: 4px solid;
}
p {
border-block-end: 4px dotted;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-color - বর্ডারের রং নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 4px solid;
border-color: tomato;
}
p {
border: 4px dotted;
border-color: orange;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-left-color - বাম বর্ডারের রং নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 4px solid;
border-left-color: tomato;
}
p {
border: 4px dotted;
border-left-color: orange;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-right-color - ডান বর্ডারের রং নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 4px solid;
border-right-color: tomato;
}
p {
border: 4px dotted;
border-right-color: orange;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-top-color - উপরের বর্ডারের রং নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 4px solid;
border-top-color: tomato;
}
p {
border: 4px dotted;
border-top-color: orange;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-bottom-color - নিচের বর্ডারের রং নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 4px solid;
border-bottom-color: tomato;
}
p {
border: 4px dotted;
border-bottom-color: orange;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-inline-color - ইনলাইন বর্ডারের রং নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 4px solid;
border-inline-color: tomato;
}
p {
border: 4px dotted;
border-inline-color: orange;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-block-color - ব্লক বর্ডারের রং নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 4px solid;
border-block-color: tomato;
}
p {
border: 4px dotted;
border-block-color: orange;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-width - বর্ডারের প্রস্থ নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-style: solid;
border-width: 4px;
}
p {
border-style: dotted;
border-width: 4px;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-left-width - বাম বর্ডারের প্রস্থ নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-style: solid;
border-left-width: 4px;
}
p {
border-style: dotted;
border-left-width: 4px;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-right-width - ডান বর্ডারের প্রস্থ নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-style: solid;
border-right-width: 4px;
}
p {
border-style: dotted;
border-right-width: 4px;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-top-width - উপরের বর্ডারের প্রস্থ নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-style: solid;
border-top-width: 4px;
}
p {
border-style: dotted;
border-top-width: 4px;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-bottom-width - নিচের বর্ডারের প্রস্থ নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-style: solid;
border-bottom-width: 4px;
}
p {
border-style: dotted;
border-bottom-width: 4px;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-inline-width - ইনলাইন বর্ডারের প্রস্থ নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-style: solid;
border-inline-width: 4px;
}
p {
border-style: dotted;
border-inline-width: 4px;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>border-block-width - ব্লক বর্ডারের প্রস্থ নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-style: solid;
border-block-width: 4px;
}
p {
border-style: dotted;
border-block-width: 4px;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>সিএসএস সম্পর্কিত বিস্তারিত তথ্য
কার্যকর কোডিং উদাহরণ এবং সেগুলোর রেফারেন্স লিংক
| নাম | বিবরণ |
|---|---|
| border | বর্ডারের বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়। |
| border-left | বাম বর্ডারের বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়। |
| border-right | ডান বর্ডারের বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়। |
| border-top | উপরের বর্ডারের বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়। |
| border-bottom | নিচের বর্ডারের বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়। |
| border-block | ব্লক বর্ডারের বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়। |
| border-inline | ইনলাইন বর্ডারের বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়। |
| border-inline-start | ইনলাইনের শুরু বর্ডারের বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়। |
| border-inline-end | ইনলাইনের শেষ বর্ডারের বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়। |
| border-block-start | ব্লকের শুরু বর্ডারের বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়। |
| border-block-end | ব্লকের শেষ বর্ডারের বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়। |
| border-color | বর্ডারের রং নির্ধারণ করতে ব্যবহৃত হয়। |
| border-left-color | বাম বর্ডারের রং নির্ধারণ করতে ব্যবহৃত হয়। |
| border-right-color | ডান বর্ডারের রং নির্ধারণ করতে ব্যবহৃত হয়। |
| border-top-color | উপরের বর্ডারের রং নির্ধারণ করতে ব্যবহৃত হয়। |
| border-bottom-color | নিচের বর্ডারের রং নির্ধারণ করতে ব্যবহৃত হয়। |
| border-inline-color | ইনলাইন বর্ডারের রং নির্ধারণ করতে ব্যবহৃত হয়। |
| border-block-color | ব্লক বর্ডারের রং নির্ধারণ করতে ব্যবহৃত হয়। |
| border-width | বর্ডারের প্রস্থ নির্ধারণ করতে ব্যবহৃত হয়। |
| border-left-width | বাম বর্ডারের প্রস্থ নির্ধারণ করতে ব্যবহৃত হয়। |
| border-right-width | ডান বর্ডারের প্রস্থ নির্ধারণ করতে ব্যবহৃত হয়। |
| border-top-width | উপরের বর্ডারের প্রস্থ নির্ধারণ করতে ব্যবহৃত হয়। |
| border-bottom-width | নিচের বর্ডারের প্রস্থ নির্ধারণ করতে ব্যবহৃত হয়। |
| border-inline-width | ইনলাইন বর্ডারের প্রস্থ নির্ধারণ করতে ব্যবহৃত হয়। |
| border-block-width | ব্লক বর্ডারের প্রস্থ নির্ধারণ করতে ব্যবহৃত হয়। |