সিএসএস টেক্সট(text)
টেক্সট ফরমেট
এই টেক্সটগুলোকে স্টাইল করার জন্য কিছু টেক্সট ফরম্যাট প্রোপার্টি ব্যবহার করা হয়েছে। হেডিং-এ text-align, text-transform এবং color প্রোপার্টি ব্যবহার করা হয়েছে। প্যারাগ্রাফে ইনডেন্ট এলাইন এবং ক্যারেক্টার স্পেসিং নির্দিষ্ট করে দেয়া হয়েছে।
এক নজরে সিএসএস টেক্সট প্রোপার্টিসমূহ
টেক্সটের কালার সেট করার জন্য ব্যবহার করা হয়।
টেক্সটের ডিরেকশন সেট করার জন্য ব্যবহার করা হয়।
শব্দের মধ্যে দুটি অক্ষরের মধ্যবর্তী স্পেস বৃদ্ধি বা হ্রাস করার জন্য ব্যবহার করা হয়।
দুটি লাইনের মধ্যবর্তী উচ্চতা সেট করার জন্য ব্যবহার করা হয়।
টেক্সটের হরিজন্টাল এলাইনমেন্ট সেট করার জন্য ব্যবহার করা হয়।
টেক্সটকে সাজসজ্জা বা ডেকোরেটশন করার জন্য ব্যবহার করা হয়।
একটি টেক্সট ব্লকের প্রথম লাইনটির ইন্ডেন্টেশন সেট করার জন্য ব্যবহার করা হয়।
টেক্সটের মধ্যে স্যাডো ইফেক্ট তৈরি করার জন্য ব্যবহার করা হয়।
টেক্সট ক্যাপিটাইলেজশন নিয়ন্ত্রন করার জন্য ব্যবহার করা হয়।
direction প্রোপার্টির সাথে ব্যবহৃত হয়ে একই ডকুমেন্টের মধ্যে বিভিন্ন ভাষা সাপোর্ট করানোর জন্য। টেক্সট ওভাররাইড হবে কিনা তা সেট বা রিটার্ন করে।
এলিমেন্টের ভার্টিকাল এলাইনমেন্ট সেট করার জন্য ব্যবহার করা হয়।
এলিমেন্ট গুলোর মধ্যে কতগুলো হোয়াইট স্পেস নেওয়া হবে তা ঠিক করার জন্য ব্যবহার করা হয়।
বাক্যের মধ্যে দুটি শব্দের মধ্যবর্তী স্পেস বৃদ্ধি বা হ্রাস করার জন্য ব্যবহার করা হয়।
color প্রোপার্টি
টেক্সটকে বিভিন্ন কালার করার জন্য color প্রোপার্টি ব্যবহার করা হয়।
নিচের যেকোনো একটি পদ্ধতি ব্যবহার করে কালার সেট করা যায়ঃ
- name - কালারের নাম ব্যবহার করে, যেমন
"green" - Hex - হেক্সাডেসিমাল ভ্যালু ব্যবহার করে, যেমন
"#00ff00" - RGB - RGB ভ্যালু ব্যবহার করে, যেমন
"rgb(0,255,0)"
কালার ভ্যালু সম্পর্কে সম্পূর্ণ ধারনা পাওয়ার জন্য আমাদের সিএসএস কালার ভ্যালু লিংক থেকে ঘুরে আসুন।
একটি পেজের ডিফল্ট টেক্সট কালার সেট করার জন্য body সিলেক্টর ব্যবহার করতে হয়।
নিচের উদাহরণে body সিলেক্টর দ্বারা একটি পেজের ডিফল্ট টেক্সট কালার blue সেট করা হলো। ফলে ডিফল্টভাবে এই পেজের টেক্সট কালার হবে blue।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
body {
color: red;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>color প্রোপার্টির ব্যবহার</h1>
<p>বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের পশ্চিম, উত্তর
ও পূর্ব সীমান্তে ভারত,দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত।</p>
</body>
</html>
ফলাফল
text-align প্রোপার্টি
text-align প্রোপার্টি ব্যবহার করে টেক্সটের আনুভূমিক(horizontal) এলাইনমেন্ট সেট করা হয়।
টেক্সটে left, right, centered অথবা justified এই চার ধরনের এলাইনমেন্ট ব্যবহার করা যায়।
নিচের উদাহরণে টেক্সট এর জন্য center, left এবং right এলাইন ব্যবহার করা হয়েছে। টেক্সট এর নির্দেশনা বাম থেকে ডানে হলে left এলাইনমেন্ট ডিফল্ট হবে এবং টেক্সট এর নির্দেশনা ডান থেকে বামে হলে right এলাইনমেন্ট ডিফল্ট হবে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p.center {
color: red;
text-align: center;
}
p.legt {
color: blue;
text-align: left;
}
p.right {
color: green;
text-align: right;
}
</style>
</head>
<body>
<h2>সিএসএস text-align প্রোপার্টির ব্যবহার</h2>
<p class="center">সিএসএস text-align প্রোপার্টির ব্যবহার (মাঝে)</p>
<p class="left">সিএসএস text-align প্রোপার্টির ব্যবহার (বামে)</p>
<p class="right">সিএসএস text-align প্রোপার্টির ব্যবহার (ডানে)</p>
</body>
</html>
ফলাফল
যখন text-align প্রোপার্টির ভ্যালু "justify" সেট করা হয়, তখন প্রত্যেক লাইন বামে ও ডানে সমানভাবে প্রসারিত হয়। অনেকটা ম্যাগাজিন এবং পত্রিকার মত বামে ও ডানে মার্জিন নিয়ে নেয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div {
border: 2px solid black;
padding: 10px;
width: 250px;
height: 250px;
text-align: justify;
}
</style>
</head>
<body>
<h1>text-align: justify; এর উদাহরণ</h1>
<div>
বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের পশ্চিম, উত্তর ও পূর্ব সীমান্তে ভারত,
দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত। বাংলাদেশের ভূখণ্ড ভৌগোলিকভাবে একটি
উর্বর ব-দ্বীপের অংশ বিশেষ।
</div>
</body>
</html>
ফলাফল
text-decoration প্রোপার্টি
টেক্সট ডেকোরেশন সেট করতে বা মুছে ফেলার জন্য text-decoration প্রোপার্টিটি ব্যবহার করা হয়।
টেক্সটের নিচের আন্ডারলাইন মুছে ফেলার জন্য text-decoration: none; ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
a {
color: brown;
text-decoration: none;
}
</style>
</head>
<body>
<h1>text-decoration: none; এর ব্যবহার</h1>
<a href="https://www.sattacademy.com">SATT Academy</a>
</body>
</html>
বিঃদ্রঃ সাধারণত হাইপারলিংক যুক্ত টেক্সট আন্ডারলাইন হয়। এই উদাহরণটিতে text-decoration: none; ব্যবহার করায় লিংকটিতে কোন আন্ডারলাইন হয়নি।
ফলাফল
টেক্সট ডেকোরেশনের জন্য text-decoration-এ অন্যান্য যে ভ্যালু গুলো ব্যবহৃত হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p.overline {
color: red;
text-decoration: overline;
}
p.linethrough {
color: green;
text-decoration: line-through;
}
p.underline {
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>text-decoration প্রোপার্টির ব্যবহার</h1>
<p class="overline">text-decoration প্রোপার্টির ব্যবহার(overline)</p>
<p class="linethrough">text-decoration প্রোপার্টির ব্যবহার(line-through)</p>
<p class="underline">text-decoration প্রোপার্টির ব্যবহার(underline)</p>
</body>
</html>
ফলাফল
text-transform প্রোপার্টি
টেক্সটকে সাধারণত বড় এবং ছোট হাতের অক্ষরে উপস্থাপন করার জন্য text-transform প্রোপার্টিটি ব্যবহার করা হয়।
এটি সাধারণত বড় হাতের অক্ষর(uppercase)-কে ছোট হাতের অক্ষরে(lowercase) বা ছোট হাতের অক্ষরকে বড় হাতের অক্ষরে রুপান্তরিত করার জন্য অথবা শব্দের প্রথম বর্ণকে বড় হাতের অক্ষরে লেখার জন্য ব্যবহার করা হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<h1>text-transform প্রোপার্টির ব্যবহার</h1>
<p class="uppercase">hello bangladesh টেক্সটি uppercase এ পরিণত হয়েছে।</p>
<p class="lowercase"> HELLO BANGLADESH টেক্সটি lowercase এ পরিণত হয়েছে।</p>
<p class="capitalize">hello bangladesh টেক্সটি capitalize এ পরিণত হয়েছে।</p>
</body>
</html>
ফলাফল
text-indent প্রোপার্টি
টেক্সটের প্রথম লাইনে ইনডেন্ট দেওয়ার জন্য text-indent প্রোপার্টি ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p {
text-indent: 100px;
}
</style&g
</head>
<body>
<h1>text-indent প্রোপার্টির ব্যবহার<h1>
<p>বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের পশ্চিম, উত্তর
ও পূর্ব সীমান্তে ভারত, দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত।
বাংলাদেশের ভূখণ্ড ভৌগোলিকভাবে একটি উর্বর ব-দ্বীপের অংশ বিশেষ।
</p>
</body>
</html>
ফলাফল
letter-spacing প্রোপার্টি
টেক্সটের মধ্যে দুটি অক্ষরের মধ্যবর্তী দুরত্ব বাড়ানো বা কমানোর জন্য letter-spacing প্রোপার্টিটি ব্যবহার করা হয়।
নিচের উদাহরণে দেখানো হলো কিভাবে অক্ষরের স্পেস বাড়ানো বা কমানো যায়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p.paragraph1 {
letter-spacing: 5px;
}
p.paragraph2 {
letter-spacing: -4px;
}
</style>
</head>
<body>
<h1>letter-spacing প্রোপা্টির ব্যবহার</h1>
<p class="paragraph1">letter-spacing ব্যবহারের মাধ্যমে অক্ষরের স্পেস নির্ধারণ।</p>
<p class="paragraph2">letter-spacing ব্যবহারের মাধ্যমে অক্ষরের স্পেস নির্ধারণ।</p>
</body>
</html>
ফলাফল
line-height প্রোপার্টি
দুটি লাইনের মধ্যবর্তী স্পেস বাড়ানো বা কমানোর জন্য line-height প্রোপার্টিটি ব্যবহার করা হয়।
নিচের উদাহরণে দেখানো হলো কিভাবে লাইনের স্পেস বাড়ানো বা কমানো যায়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div.div1 {
line-height: 0.8;
}
div.div2 {
line-height: 2.5;
}
</style>
</head>
<body>
<h1>line-height প্রোপার্টির ব্যবহার</h1>
<div class="div1">
এই এলিমেন্টটির দুই লাইনের ফাঁকা কম।<br>
এই এলিমেন্টটির দুই লাইনের ফাঁকা কম।
</div>
<div class="div2">
এএই এলিমেন্টটির দুই লাইনের ফাঁকা বেশি।<br>
এই এলিমেন্টটির দুই লাইনের ফাঁকা বেশি।
</div>
<div>
এই এলিমেন্টটির দুই লাইনের ফাঁকা স্বাভাবিক।<br>
স্বাভাবিক লাইন উচ্চতা হলো ১১০% থেকে ১২০%।
</div>
</body>
</html>
ফলাফল
direction প্রোপার্টি
একটি এলিমেন্টের টেক্সটের ডিরেকশন পরিবর্তন করার জন্য direction প্রোপার্টিটি ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p.rtl {
direction: rtl;
}
</style>
</head>
<body>
<h3>direction প্রোপার্টির ব্যবহার</h3>
<p>এটি ডিফল্ট টেক্সট ডিরেকশন।</p>
<p class="rtl">এটি right-to-left টেক্সট ডিরেকশন।</p>
</body>
</html>
ফলাফল
word-spacing প্রোপার্টি
বাক্যের মধ্যে দুটি শব্দের মধ্যবর্তী স্পেস বাড়ানো বা কমানোর জন্য word-spacing প্রোপার্টি ব্যবহার করা হয়।
নিচের উদাহরণের মাধ্যমে দেখানো হলো কিভাবে দুটি শব্দের মধ্যবর্তী স্পেস বাড়ানো বা কমানো যায়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p.paragraph1 {
word-spacing: 15px;
}
p.paragraph2 {
word-spacing:-7px;
}
</style>
</head>
<body>
<h1>word-spacing প্রোপার্টির ব্যবহার</h1>
<p class="paragraph1">word-spacing ব্যবহারের মাধ্যমে দুটি শব্দের মধ্যবর্তী স্পেস নির্ধারণ।</p>
<p class="paragraph2">word-spacing ব্যবহারের মাধ্যমে দুটি শব্দের মধ্যবর্তী স্পেস নির্ধারণ।</p>
</body>
</html>
ফলাফল