সিএসএস

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
  scroll-behavior: smooth;
}

#html {
  height: 600px;
  background-color: pink;
}

#css {
  height: 600px;
  background-color: yellow;
}
</style>
</head>
<body>

<div id="html">
  <h1>এইচটিএমএল</h1>
  <p>হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
  <a href="#css">এইচটিএমএল</a>
</div>

<div id="css">
  <h1>সিএসএস</h1>
  <p>ক্যাসকেডিং স্টাইল শিট</p>
  <a href="#html">সিএসএস</a>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
  scroll-behavior: smooth;
}

section {
  height: 500px;
  padding: 20px;
}

#html {
  background-color: pink;
}

#css {
  background-color: yellow;
  scroll-margin: 50px;
}
</style>
</head>
<body>

<section id="html">
  <h1>এইচটিএমএল</h1>
  <a href="#css">এইচটিএমএল</a>
</section>

<section id="css">
  <h1>সিএসএস</h1>
  <a href="#html">সিএসএস</a>
</section>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
section {
  height: 500px;
  padding: 20px;
}

#html {
  background-color: pink;
}

#css {
  background-color: yellow;
  scroll-margin-block: 60px;
}
</style>
</head>
<body>

<section id="html">
  <h1>এইচটিএমএল</h1>
  <a href="#css">এইচটিএমএল</a>
</section>

<section id="css">
  <h1>সিএসএস</h1>
  <a href="#html">সিএসএস</a>
</section>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
section {
  height: 500px;
  padding: 20px;
}

#html {
  background-color: pink;
}

#css {
  background-color: yellow;
  scroll-margin-block-end: 80px;
}
</style>
</head>
<body>

<section id="html">
  <h1>এইচটিএমএল</h1>
  <a href="#css">এইচটিএমএল</a>
</section>

<section id="css">
  <h1>সিএসএস</h1>
  <a href="#html">সিএসএস</a>
</section>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
section {
  height: 500px;
  padding: 20px;
}

#html {
  background-color: pink;
}

#css {
  background-color: yellow;
  scroll-margin-block-start: 80px;
}
</style>
</head>
<body>

<section id="html">
  <h1>এইচটিএমএল</h1>
  <a href="#css">এইচটিএমএল</a>
</section>

<section id="css">
  <h1>সিএসএস</h1>
  <a href="#html">সিএসএস</a>
</section>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
section {
  height: 500px;
  padding: 20px;
}

#html {
  background-color: pink;
}

#css {
  background-color: yellow;
  scroll-margin-bottom: 80px;
}
</style>
</head>
<body>

<section id="html">
  <h1>এইচটিএমএল</h1>
  <a href="#css">এইচটিএমএল</a>
</section>

<section id="css">
  <h1>সিএসএস</h1>
  <a href="#html">সিএসএস</a>
</section>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
  width: 300px;
  height: 150px;
  overflow: auto;
  white-space: nowrap;
}

.item {
  display: inline-block;
  width: 250px;
  height: 100px;
  margin: 20px;
  padding: 20px;
  background-color: pink;
}

#css {
  scroll-margin-inline: 50px;
}
</style>
</head>
<body>

<div class="box">
  <div class="item">এইচটিএমএল</div>
  <div class="item" id="css">সিএসএস</div>
  <div class="item">জাভাস্ক্রিপ্ট</div>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
  width: 300px;
  overflow-x: auto;
  white-space: nowrap;
}

.item {
  display: inline-block;
  width: 250px;
  height: 120px;
  margin: 20px;
  background-color: pink;
}

#css {
  scroll-margin-inline-end: 60px;
}
</style>
</head>
<body>

<div class="box">
  <div class="item">এইচটিএমএল</div>
  <div class="item" id="css">সিএসএস</div>
  <div class="item">জাভাস্ক্রিপ্ট</div>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
  width: 300px;
  overflow-x: auto;
  white-space: nowrap;
}

.item {
  display: inline-block;
  width: 250px;
  height: 120px;
  margin: 20px;
  background-color: pink;
}

#css {
  scroll-margin-inline-start: 60px;
}
</style>
</head>
<body>

<div class="box">
  <div class="item">এইচটিএমএল</div>
  <div class="item" id="css">সিএসএস</div>
  <div class="item">জাভাস্ক্রিপ্ট</div>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
  width: 300px;
  overflow-x: auto;
  white-space: nowrap;
}

.item {
  display: inline-block;
  width: 250px;
  height: 120px;
  margin: 20px;
  background-color: pink;
}

#css {
  scroll-margin-left: 60px;
}
</style>
</head>
<body>

<div class="box">
  <div class="item">এইচটিএমএল</div>
  <div class="item" id="css">সিএসএস</div>
  <div class="item">জাভাস্ক্রিপ্ট</div>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
  width: 300px;
  overflow-x: auto;
  white-space: nowrap;
}

.item {
  display: inline-block;
  width: 250px;
  height: 120px;
  margin: 20px;
  background-color: pink;
}

#css {
  scroll-margin-right: 60px;
}
</style>
</head>
<body>

<div class="box">
  <div class="item">এইচটিএমএল</div>
  <div class="item" id="css">সিএসএস</div>
  <div class="item">জাভাস্ক্রিপ্ট</div>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
section {
  height: 500px;
  padding: 20px;
}

#html {
  background-color: pink;
}

#css {
  background-color: yellow;
  scroll-margin-top: 80px;
}
</style>
</head>
<body>

<section id="html">
  <h1>এইচটিএমএল</h1>
  <a href="#css">এইচটিএমএল</a>
</section>

<section id="css">
  <h1>সিএসএস</h1>
  <a href="#html">সিএসএস</a>
</section>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
  scroll-padding: 80px;
}

section {
  height: 500px;
  padding: 20px;
}

#html {
  background-color: pink;
}

#css {
  background-color: yellow;
}
</style>
</head>
<body>

<section id="html">
  <h1>এইচটিএমএল</h1>
  <a href="#css">এইচটিএমএল</a>
</section>

<section id="css">
  <h1>সিএসএস</h1>
  <a href="#html">সিএসএস</a>
</section>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
  scroll-padding-block: 80px;
}

section {
  height: 500px;
  padding: 20px;
}

#html {
  background-color: pink;
}

#css {
  background-color: yellow;
}
</style>
</head>
<body>

<section id="html">
  <h1>এইচটিএমএল</h1>
  <a href="#css">এইচটিএমএল</a>
</section>

<section id="css">
  <h1>সিএসএস</h1>
  <a href="#html">সিএসএস</a>
</section>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
  scroll-padding-block-end: 80px;
}

section {
  height: 500px;
  padding: 20px;
}

#html {
  background-color: pink;
}

#css {
  background-color: yellow;
}
</style>
</head>
<body>

<section id="html">
  <h1>এইচটিএমএল</h1>
  <a href="#css">এইচটিএমএল</a>
</section>

<section id="css">
  <h1>সিএসএস</h1>
  <a href="#html">সিএসএস</a>
</section>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
  scroll-padding-block-start: 80px;
}

section {
  height: 500px;
  padding: 20px;
}

#html {
  background-color: pink;
}

#css {
  background-color: yellow;
}
</style>
</head>
<body>

<section id="html">
  <h1>এইচটিএমএল</h1>
  <a href="#css">এইচটিএমএল</a>
</section>

<section id="css">
  <h1>সিএসএস</h1>
  <a href="#html">সিএসএস</a>
</section>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
  scroll-padding-bottom: 80px;
}

section {
  height: 500px;
  padding: 20px;
}

#html {
  background-color: pink;
}

#css {
  background-color: yellow;
}
</style>
</head>
<body>

<section id="html">
  <h1>এইচটিএমএল</h1>
  <a href="#css">এইচটিএমএল</a>
</section>

<section id="css">
  <h1>সিএসএস</h1>
  <a href="#html">সিএসএস</a>
</section>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
  width: 300px;
  overflow-x: auto;
  scroll-padding-inline: 50px;
  white-space: nowrap;
}

.item {
  display: inline-block;
  width: 250px;
  height: 120px;
  margin: 20px;
  background-color: pink;
}
</style>
</head>
<body>

<div class="box">
  <div class="item">এইচটিএমএল</div>
  <div class="item">সিএসএস</div>
  <div class="item">জাভাস্ক্রিপ্ট</div>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
  width: 300px;
  overflow-x: auto;
  scroll-padding-inline-end: 60px;
  white-space: nowrap;
}

.item {
  display: inline-block;
  width: 250px;
  height: 120px;
  margin: 20px;
  background-color: pink;
}
</style>
</head>
<body>

<div class="box">
  <div class="item">এইচটিএমএল</div>
  <div class="item">সিএসএস</div>
  <div class="item">জাভাস্ক্রিপ্ট</div>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
  width: 300px;
  overflow-x: auto;
  scroll-padding-inline-start: 60px;
  white-space: nowrap;
}

.item {
  display: inline-block;
  width: 250px;
  height: 120px;
  margin: 20px;
  background-color: pink;
}
</style>
</head>
<body>

<div class="box">
  <div class="item">এইচটিএমএল</div>
  <div class="item">সিএসএস</div>
  <div class="item">জাভাস্ক্রিপ্ট</div>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
  width: 300px;
  overflow-x: auto;
  scroll-padding-left: 60px;
  white-space: nowrap;
}

.item {
  display: inline-block;
  width: 250px;
  height: 120px;
  margin: 20px;
  background-color: pink;
}
</style>
</head>
<body>

<div class="box">
  <div class="item">এইচটিএমএল</div>
  <div class="item">সিএসএস</div>
  <div class="item">জাভাস্ক্রিপ্ট</div>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
  width: 300px;
  overflow-x: auto;
  scroll-padding-right: 60px;
  white-space: nowrap;
}

.item {
  display: inline-block;
  width: 250px;
  height: 120px;
  margin: 20px;
  background-color: pink;
}
</style>
</head>
<body>

<div class="box">
  <div class="item">এইচটিএমএল</div>
  <div class="item">সিএসএস</div>
  <div class="item">জাভাস্ক্রিপ্ট</div>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
  scroll-padding-top: 80px;
}

section {
  height: 500px;
  padding: 20px;
}

#html {
  background-color: pink;
}

#css {
  background-color: yellow;
}
</style>
</head>
<body>

<section id="html">
  <h1>এইচটিএমএল</h1>
  <a href="#css">এইচটিএমএল</a>
</section>

<section id="css">
  <h1>সিএসএস</h1>
  <a href="#html">সিএসএস</a>
</section>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  width: 300px;
  height: 200px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.item {
  height: 200px;
  scroll-snap-align: start;
  padding: 20px;
  box-sizing: border-box;
}

.item:nth-child(1) {
  background-color: pink;
}

.item:nth-child(2) {
  background-color: yellow;
}

.item:nth-child(3) {
  background-color: lightblue;
}
</style>
</head>
<body>

<div class="container">
  <div class="item">এইচটিএমএল</div>
  <div class="item">সিএসএস</div>
  <div class="item">জাভাস্ক্রিপ্ট</div>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  width: 300px;
  height: 200px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.item {
  height: 200px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: 20px;
  box-sizing: border-box;
}

.item:nth-child(1) {
  background-color: pink;
}

.item:nth-child(2) {
  background-color: yellow;
}

.item:nth-child(3) {
  background-color: lightblue;
}
</style>
</head>
<body>

<div class="container">
  <div class="item">এইচটিএমএল</div>
  <div class="item">সিএসএস</div>
  <div class="item">জাভাস্ক্রিপ্ট</div>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  width: 300px;
  height: 200px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.item {
  height: 200px;
  scroll-snap-align: start;
  padding: 20px;
  box-sizing: border-box;
}

.item:nth-child(1) {
  background-color: pink;
}

.item:nth-child(2) {
  background-color: yellow;
}

.item:nth-child(3) {
  background-color: lightblue;
}
</style>
</head>
<body>

<div class="container">
  <div class="item">এইচটিএমএল</div>
  <div class="item">সিএসএস</div>
  <div class="item">জাভাস্ক্রিপ্ট</div>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
  width: 300px;
  height: 150px;
  overflow: auto;
  scrollbar-color: blue lightgray;
}

.content {
  height: 500px;
  padding: 20px;
  background-color: pink;
}
</style>
</head>
<body>

<div class="box">
  <div class="content">
    এইচটিএমএল
  </div>
</div>

</body>
</html>