সিএসএস

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
  text-align: left;
}

h2 {
  text-align: center;
}

h3 {
  text-align: right;
}
</style>
</head>
<body>

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

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
  text-align: justify;
}

.right {
  text-align-last: right;
  -moz-text-align-last: right;
}

.center {
  -moz-text-align-last: center; 
  text-align-last: center;
}

.justify {
  text-align-last: justify;
  -moz-text-align-last: justify; 
}
</style>
</head>
<body>

<div class="right">প্রোগ্রামিং শিখুন - প্রোগ্রামিং দিয়ে আপনার ক্যারিয়ার গড়ুন</div>
<div class="center">প্রোগ্রামিং শিখুন - প্রোগ্রামিং দিয়ে আপনার ক্যারিয়ার গড়ুন</div>
<div class="justify">প্রোগ্রামিং শিখুন - প্রোগ্রামিং দিয়ে আপনার ক্যারিয়ার গড়ুন</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.underline {
  text-decoration: underline;
}

.line-through {
  text-decoration: line-through;
}

.overline {
  text-decoration: overline;
}

</style>
</head>
<body>

<p class="underline">প্রোগ্রামিং শিখুন</p>
<p class="line-through">প্রোগ্রামিং শিখুন</p>
<p class="overline">প্রোগ্রামিং শিখুন</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.underline {
  text-decoration-line: underline;
}

.line-through {
  text-decoration-line: line-through;
}

.overline {
  text-decoration-line: overline;
}

</style>
</head>
<body>

<p class="underline">প্রোগ্রামিং শিখুন</p>
<p class="line-through">প্রোগ্রামিং শিখুন</p>
<p class="overline">প্রোগ্রামিং শিখুন</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.solid {
  text-decoration-line: underline;
  text-decoration-style: solid;
}

.double {
  text-decoration-line: underline;
  text-decoration-style: double;
}

.dashed {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

</style>
</head>
<body>

<p class="solid">প্রোগ্রামিং শিখুন</p>
<p class="double">প্রোগ্রামিং শিখুন</p>
<p class="dashed">প্রোগ্রামিং শিখুন</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.tomato {
  text-decoration-style: solid;
  text-decoration-line: underline;
  text-decoration-color: tomato;
}

.orange {
  text-decoration-style: solid;
  text-decoration-line: underline;
  text-decoration-color: orange;
}

.yellow {
  text-decoration-style: solid;
  text-decoration-line: underline;
  text-decoration-color: yellow;
}

</style>
</head>
<body>

<p class="tomato">প্রোগ্রামিং শিখুন</p>
<p class="orange">প্রোগ্রামিং শিখুন</p>
<p class="yellow">প্রোগ্রামিং শিখুন</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

h1 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
}

h2 {
  text-decoration-line: underline;
  text-decoration-thickness: 4px;
}

h3 {
  text-decoration-line: underline;
  text-decoration-thickness: 8px;
}

</style>
</head>
<body>

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

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.circle {
  text-emphasis: circle;
}

.filled {
  text-emphasis: filled;
}

.triangle {
  text-emphasis: triangle;
}

</style>
</head>
<body>

<p class="circle">প্রোগ্রামিং শিখুন</p>
<p class="filled">প্রোগ্রামিং শিখুন</p>
<p class="triangle">প্রোগ্রামিং শিখুন</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.circle {
  text-emphasis-style: circle;
}

.filled {
  text-emphasis-style: filled;
}

.triangle {
  text-emphasis-style: triangle;
}

</style>
</head>
<body>

<p class="circle">প্রোগ্রামিং শিখুন</p>
<p class="filled">প্রোগ্রামিং শিখুন</p>
<p class="triangle">প্রোগ্রামিং শিখুন</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.tomato {
  text-emphasis-style: triangle; 
  text-emphasis-color: tomato;
}

.orange {
  text-emphasis-style: triangle; 
  text-emphasis-color: orange;
}

.yellow {
  text-emphasis-style: triangle; 
  text-emphasis-color: yellow;
}

</style>
</head>
<body>

<p class="tomato">প্রোগ্রামিং শিখুন</p>
<p class="orange">প্রোগ্রামিং শিখুন</p>
<p class="yellow">প্রোগ্রামিং শিখুন</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.over {
  text-emphasis-style: triangle; 
  text-emphasis-position: over;
}

.under {
  text-emphasis-style: triangle; 
  text-emphasis-position: under;
}
</style>
</head>
<body>

<p class="over">প্রোগ্রামিং শিখুন</p>
<p class="under">প্রোগ্রামিং শিখুন</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.a {
  text-indent: 20px; 
}

.b {
  text-indent: 40px; 
}
</style>
</head>
<body>

<div class="a">প্রোগ্রামিং শিখুন - প্রোগ্রামিং দিয়ে আপনার ক্যারিয়ার গড়ুন</div>
<div class="b">প্রোগ্রামিং শিখুন - প্রোগ্রামিং দিয়ে আপনার ক্যারিয়ার গড়ুন</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.word {
  text-align: justify;
  text-justify: inter-word;
}

.character {
  text-align: justify;
  text-justify: inter-character;
}
</style>
</head>
<body>

<div class="word">প্রোগ্রামিং শিখুন - প্রোগ্রামিং দিয়ে আপনার ক্যারিয়ার গড়ুন</div>
<div class="character">প্রোগ্রামিং শিখুন - প্রোগ্রামিং দিয়ে আপনার ক্যারিয়ার গড়ুন</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

div {
  writing-mode: vertical-lr;
  border: 1px solid red;
  display: inline-block;
  height: 350px;
  width: 150px;
}

.word {
  text-orientation: mixed;
}

.upright {
  text-orientation: upright;
}
</style>
</head>
<body>

<div class="mixed">প্রোগ্রামিং শিখুন - প্রোগ্রামিং দিয়ে আপনার ক্যারিয়ার গড়ুন</div>
<div class="upright">প্রোগ্রামিং শিখুন - প্রোগ্রামিং দিয়ে আপনার ক্যারিয়ার গড়ুন</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

div {
  width: 65px;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid red;
}

.clip {
  text-overflow: clip;
}

.ellipsis {
  text-overflow: ellipsis;
}

</style>
</head>
<body>

<div class="clip">প্রোগ্রামিং শিখুন</div><br>
<div class="ellipsis">প্রোগ্রামিং শিখুন</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

h1 {
  text-shadow: 2px 2px #ff0000;
}

h2 {
  text-shadow: 4px 4px #ff0000;
}
</style>
</head>
<body>

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

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}
</style>
</head>
<body>

<p class="uppercase">হ্যালো বিশ্ব</p>
<p class="lowercase">হ্যালো বিশ্ব</p>
<p class="capitalize">হ্যালো বিশ্ব</p>

</body>
</html>