এই টেক্সটটি কিছু টেক্সট ফরম্যাটিং প্রপার্টি দিয়ে স্টাইল করা হয়েছে। হেডিং-এ text-align, text-transform, এবং color প্রপার্টি ব্যবহার করা হয়েছে। প্যারাগ্রাফটি ইনডেন্ট করা, অ্যালাইন করা, এবং অক্ষরগুলোর মধ্যে ফাঁক নির্দিষ্ট করা আছে। এই রঙিন "নিজে চেষ্টা করুন" লিংক থেকে আন্ডারলাইন সরিয়ে দেওয়া হয়েছে।
টেক্সটের রঙ নির্ধারণ করতে color প্রপার্টি ব্যবহার করা হয়।
রঙ নির্দিষ্ট করা যায় এভাবে:
সম্ভাব্য সব রঙের একটি সম্পূর্ণ তালিকার জন্য CSS Color Values দেখুন।
একটি পেজের ডিফল্ট টেক্সট রঙ body সিলেক্টরে নির্ধারিত হয়।
body {
color: blue;
}
h1 {
color: green;
}মনে রাখবেন: W3C কমপ্লায়েন্ট CSS-এর জন্য: color প্রপার্টি নির্ধারণ করলে, অবশ্যই background-color-ও নির্ধারণ করতে হবে।
একটি টেক্সটের অনুভূমিক অ্যালাইনমেন্ট নির্ধারণ করতে text-align প্রপার্টি ব্যবহার করা হয়।
একটি টেক্সট বামে বা ডানে অ্যালাইন করা, মাঝ বরাবর, বা জাস্টিফাই করা যায়।
নিচের উদাহরণে মাঝ বরাবর অ্যালাইন করা, এবং বামে ও ডানে অ্যালাইন করা টেক্সট দেখানো হয়েছে (টেক্সটের দিক left-to-right হলে ডিফল্ট বাম অ্যালাইনমেন্ট, এবং right-to-left হলে ডিফল্ট ডান অ্যালাইনমেন্ট):
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}text-align প্রপার্টি "justify" সেট করা হলে, প্রতিটি লাইন এমনভাবে প্রসারিত হয় যাতে প্রতিটি লাইনের প্রস্থ সমান হয়, এবং বাম ও ডান মার্জিন সোজা থাকে (ম্যাগাজিন ও সংবাদপত্রের মতো):
div {
text-align: justify;
}টেক্সট থেকে ডেকোরেশন সেট বা মুছে ফেলার জন্য text-decoration প্রপার্টি ব্যবহার করা হয়।
লিংক থেকে আন্ডারলাইন সরাতে প্রায়ই text-decoration: none; ভ্যালু ব্যবহার করা হয়:
a {
text-decoration: none;
}টেক্সট ডেকোরেট করতে অন্যান্য text-decoration ভ্যালুও ব্যবহার করা হয়:
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}মনে রাখবেন: যে টেক্সট লিংক নয়, তাতে আন্ডারলাইন ব্যবহার না করাই ভালো, কারণ এতে পাঠক প্রায়ই বিভ্রান্ত হন।
একটি টেক্সটে uppercase ও lowercase অক্ষর নির্দিষ্ট করতে text-transform প্রপার্টি ব্যবহার করা হয়।
এটি সবকিছু uppercase বা lowercase অক্ষরে রূপান্তর করতে, বা প্রতিটি শব্দের প্রথম অক্ষর বড় হাতের করতে ব্যবহার করা যায়:
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}একটি টেক্সটের প্রথম লাইনের ইনডেন্টেশন নির্দিষ্ট করতে text-indent প্রপার্টি ব্যবহার করা হয়:
p {
text-indent: 50px;
}একটি টেক্সটের অক্ষরগুলোর মধ্যে ফাঁক নির্দিষ্ট করতে letter-spacing প্রপার্টি ব্যবহার করা হয়।
নিচের উদাহরণে অক্ষরগুলোর মধ্যে ফাঁক কীভাবে বাড়ানো বা কমানো যায় তা দেখানো হয়েছে:
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}লাইনগুলোর মধ্যে ফাঁক নির্দিষ্ট করতে line-height প্রপার্টি ব্যবহার করা হয়:
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}একটি এলিমেন্টের টেক্সটের দিক পরিবর্তন করতে direction প্রপার্টি ব্যবহার করা হয়:
p {
direction: rtl;
}একটি টেক্সটের শব্দগুলোর মধ্যে ফাঁক নির্দিষ্ট করতে
word-spacing প্রপার্টি ব্যবহার করা হয়।
নিচের উদাহরণে শব্দগুলোর মধ্যে ফাঁক কীভাবে বাড়ানো বা কমানো যায় তা দেখানো হয়েছে:
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}text-shadow প্রপার্টি টেক্সটে শ্যাডো যোগ করে।
নিচের উদাহরণে অনুভূমিক শ্যাডোর অবস্থান (3px), উলম্ব শ্যাডোর অবস্থান (2px) এবং শ্যাডোর রঙ (লাল) নির্দিষ্ট করা হয়েছে:
h1 {
text-shadow: 3px 2px red;
}| প্রপার্টি | বিবরণ |
|---|---|
| color | টেক্সটের রঙ সেট করে |
| direction | টেক্সটের দিক/লেখার দিক নির্দিষ্ট করে |
| letter-spacing | একটি টেক্সটের অক্ষরগুলোর মধ্যে ফাঁক বাড়ায় বা কমায় |
| line-height | লাইনের উচ্চতা সেট করে |
| text-align | টেক্সটের অনুভূমিক অ্যালাইনমেন্ট নির্দিষ্ট করে |
| text-decoration | টেক্সটে যোগ করা ডেকোরেশন নির্দিষ্ট করে |
| text-indent | একটি টেক্সট-ব্লকের প্রথম লাইনের ইনডেন্টেশন নির্দিষ্ট করে |
| text-shadow | টেক্সটে যোগ করা শ্যাডো ইফেক্ট নির্দিষ্ট করে |
| text-transform | টেক্সটের ক্যাপিটালাইজেশন নিয়ন্ত্রণ করে |
| text-overflow | ওভারফ্লো হওয়া কনটেন্ট যা প্রদর্শিত হয় না, তা ব্যবহারকারীকে কীভাবে জানানো উচিত তা নির্দিষ্ট করে |
| unicode-bidi | একই ডকুমেন্টে একাধিক ভাষা সমর্থন করার জন্য টেক্সট ওভাররাইড করা উচিত কিনা তা সেট বা রিটার্ন করতে direction প্রপার্টির সাথে একত্রে ব্যবহার করা হয় |
| vertical-align | একটি এলিমেন্টের উলম্ব অ্যালাইনমেন্ট সেট করে |
| white-space | একটি এলিমেন্টের ভেতরের white-space কীভাবে হ্যান্ডেল হবে তা নির্দিষ্ট করে |
| word-spacing | একটি টেক্সটের শব্দগুলোর মধ্যে ফাঁক বাড়ায় বা কমায় |