X

X

X

CSS এ Text-এর ব্যবহার


TEXT FORMATTING

This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored “নিজে নিজে চেষ্টা করুণ” link.

নিজে নিজে চেষ্টা করুণ »


Text-এর রং ( Color )

color property ব্যবহার করে কোনো ইলামেন্টের টেক্সটের রং সেট করা হয়। এক্ষেত্রে নিম্নোক্ত পদ্ধতি ব্যবহৃত হয়:

  • color name – যেমন “red”
  • HEX value – যেমন “#ff0000”
  • RGB value – যেমন “rgb(255,0,0)”

সব কালার ভ্যালু দেখার জন্য  CSS Color Values লিংকটি অনুসরণ করুন।
কোনো পেজের ডিফল্ট টেক্সট কালার বডি সিলেক্টর দিয়ে বর্ণনা করা হয়।

Code Example

<style>
body {
    color: blue;
}

h1 {
    color: green;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বি:দ্র: W3C অনুযায়ী কোনো ইলামেন্টের টেক্সটের রং সেট করলে এর ব্যকগ্রাউন্ড রং-ও সেট করতে হবে।

Text এর Alignment

text-align property ব্যবহার করে কোনো ইলামেন্টের টেক্সটের এলাইনমেন্ট সেট করা হয়। টেক্সট left অতবা right aligned, centered, অথবা justified হতে পারে।

নিচে কেন্দ্রীয়, বাম এবং ডান এলাইনমেন্টের উদাহরণ দেখানো হলো:

Code Example

<style>
h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

justify alignment এর উদাহরণ:

Code Example

<style>
div {
    border: 1px solid black;
    padding: 10px;
    width: 200px;
    height: 200px;
    text-align: justify;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Text Decoration

text-decoration property ব্যবহার করে টেক্সট ডেকোরেশন সেট বা দূর করা হয়।

text-decoration: none; ব্যবহার করে লিংক থেকে আন্ডারলাইন দূর করা যায়।

Code Example

<style>
a {
    text-decoration: none;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

text-decoration এর বিভিন্ন মান ব্যবহার করে বিভিন্নভাবে টেক্সটকে ডেকোরেট করা যায়:

Code Example

<style>
h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বি:দ্র: যেসকল ইলামেন্ট লিংক নয় সেগুলোতে আন্ডারলাইন ব্যবহার করা উচিৎ নয়। কেননা এতে পাঠক এটিকে লিংক হিসেবে ধরে বিভ্রান্ত হতে পারেন।

Text Transformation

কোনো টেক্সটকে ছোট ও বড় হাতের অক্ষরে প্রকাশ করার জন্য text-transform property ব্যবহার করা হয়।

Code Example

<style>
p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Text Indentation

text-indent property ব্যবহার করে কোনো টেক্সটকে ইন্ডেন্ট করতে হয়। ইন্ডেন্ট বলতে মূল অবস্থান থেকে একটু নির্দিষ্ট দূরত্বে টেক্সটকে উপস্থাপন করানো।:

Code Example

<style>
p {
    text-indent: 50px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Letter Spacing (অক্ষর থেকে অক্ষরের দূরত্ব)

letter-spacing property ব্যবহার করে কোনো টেক্সটের অক্ষরগুলোর মধ্যবর্তী দূরত্ব সেট করা হয়।

নিচের উদাহরণে দেখানো হলো কিভাবে অক্ষর থেকে অক্ষরের দূরত্বকে নির্ধারণ করা যায়।

Code Example

<style>
h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Line Height

line-height property ব্যবহার করে দুটো লাইনের মধ্যে দূরত্ব নিয়ন্ত্রণ করা হয়।

Code Example

<style>
p.small {
    line-height: 0.7;
}

p.big {
    line-height: 1.8;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Text Direction

কোনো ইলামেন্টের টেক্সটের দিক সেট করার জন্য direction property ব্যবহার করা হয়।

Code Example

<style>
p.ex1 {
    direction: rtl;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Word Spacing (শব্দ মধ্যবর্তী দূরত্ব)

কোনো ইলামেন্টের টেক্সটের শব্দগুলোর মধ্যবর্তী দূরত্ব সেট করার জন্য word-spacing property ব্যবহার করা হয়।

নিচের উদাহরণে দেখানো হলো কিভাবে দুটো শব্দের মধ্যবর্তী দূরত্বকে নিয়ন্ত্রন করা যায়:

Code Example

<style>
h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: -5px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Text Shadow ( টেক্সটে ছাঁয়া )

text-shadow property ব্যবহার করে টেক্সটে ছাঁয়া যুক্ত করা যায়।

নিচের উদাহরণে দেখানো হলো কিভাবে টেক্সটে ছাঁয়া যুক্ত করা যায়।

Code Example

<style>
h1 {
    text-shadow: 3px 2px red;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।



সব Text Property সমূহের তালিকা

Property বর্ণনা
color টেক্সটের রং সেট করার জন্য ব্যবহৃত হয়।
direction টেক্সটের ডিক সেট করার জন্য ব্যবহৃত হয়।
letter-spacing টেক্সটের অক্ষরসমূহের মধ্যেবর্তী দূরত্ব নিয়ন্ত্রন করার জন্য ব্যবহৃত হয়।
line-height লাইনের উচ্চতা সেট করার জন্য ব্যবহৃত হয়।
text-align আনুভূমিক এলাইনমেন্ট সেট করার জন্য ব্যবহৃত হয়।
text-decoration টেক্সটের ডেকোরেশন সেট করার জন্য ব্যবহৃত হয়।
text-indent কোনো টেক্সট ব্লকের প্রথম লাইনের ইনডেনটেশন সেট করার জন্য ব্যবহৃত হয়।
text-shadow টেক্সটের ছাঁয়া নিয়ন্ত্রন করার জন্য ব্যবহৃত হয়।
text-transform টেক্সট ছোট কি বড় হাতের হবে তা সেট করার জন্য ব্যবহৃত হয়।
text-overflow ধারক ইলামেন্টের চাইতে টেক্সটের আকৃতি বড় হলে কিভাবে সেট প্রদর্শিত হবে তা নির্ধারণ করার জন্য ব্যবহৃত হয়।
vertical-align লম্বিক এলাইনমেন্ট বা অবস্থান সেট করার জন্য ব্যবহৃত হয়।
white-space কোনো ইলামেন্টের ভিতরে white-space কিভাবে নিয়ন্ত্রিত হবে তা সেট করার জন্য ব্যবহৃত হয়।
word-spacing শব্দের মধ্যবর্তী দূরত্ব সেট করার জন্য ব্যবহৃত হয়।