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 the "Try it yourself" link.
লেখা ফরম্যাটিং
ওয়েব সাইট তো কত গুলো টেক্সট আর ইমেজের সমষ্টি তাই না? লেখা গুলোকে যে যত সুন্দর করে দেখাতে পারে তার ওয়েব সাইট তত সুন্দর হয়। css আমাদের সাইটকে ভিজিটরদের কাছে সুন্দর ভাবে উপস্থাপন করতে পারে। আজ দেখব টেক্সটের যত বৈশিষ্ট / স্টাইল রয়েছে, শিরোনাম টেক্সট প্রান্তিককরণ, টেক্সট রুপান্তর, এবং রঙ বৈশিষ্ট্য ব্যবহার করে। অনুচ্ছেদের প্রান্তিককৃত, সংভৃত এবং অক্ষরের মধ্যে স্থান উল্লেখ করা হয়ে থাকে। নিম্নরেখা "এটা নিজে চেষ্টা করেন" এবং লিঙ্ক থেকে লেখা মুছে ফেলা হবে।
লেখার রঙ
লেখার রঙ দেওয়ার জন্য টেক্সট রঙ ব্যবহৃত হয়।
সিএসএস এর সঙ্গে, কিছু রঙ প্রায়শই উল্লেখ করা হয়:
- একটি HEX মান: "# ff0000"
- একটি RGB মান : "RGB (255,0,0)"
- একটি রঙ নাম - যেমন-"লাল"
একটি পাতার জন্য ডিফল্ট রং body সেকশন এর মধ্যে সংজ্ঞায়িত করা হয়।
body {
color: blue;
}
h1 {
color: #00ff00;
}
h2 {
color: rgb(255,0,0);
}
টেক্সট এলাইনমেন্ট
লেখাগুলোর বিন্যাস/ align কিভাবে হবে, ডানে নাকি বামে নাকি মধ্য খানে তাই সেট করা হয়। তিন ধরনের align করা যায়, center, left, right. সাধারন ভাবে সকল লেখা গুলো left align করা থাকে। উদাহরন হিসেবে নিচের কোড গুলো একটি এইচটিএমএল ফাইলে পেস্ট করে তারপর ব্রাউজারে দেখুনঃ
h1 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}
টেক্সট অলংকরণ
আমরা ইংরেজী এবং বাংলা লিখি বাম থেকে ডানে, কোন কোন দেশের লেখা যেমন আরবী ডান থেকে বামে লিখতে হয়। এই ডান থেকে বামে হবে নাকি বাম থেকে ডান হবে তাই direction সিএসএস রুল দিয়ে সেট করা হয়। ডিফল্ট ভাবে সেট করা থাকে left-to-right. যেভাবে আমরা লিখি। আপনি যদি ডান থেকে বামে লেখে এমন কোন দেশের ওয়েব সাইট তৈরি করেন তাহলে আপনাকে right-to-left সেট করে দিতে হবে।
টেক্সট থেকে আনডারলাইন উঠিয়ে দিতে ব্যবহার করা হয়ঃ
a {
text-decoration: none;
}
এটিও টেক্সট ডেকোরেশন করার জন্য ব্যবহার করা যেতে পারে।
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
টেক্সট রূপান্তর
text-transform ছোট অক্ষরে বা বড় অক্ষরে লেখাগুলোকে পরিবর্তন করার কাজে ব্যবহৃত হয়। তিন প্রকার text-transform রয়েছে।
Uppercase – সকল লেখাকে বড় হাতের অক্ষরে পরিনত করবে।
Lowercase – সকল লেখাকে ছোট হাতের অক্ষরে পরিনত করবে।
Capitalize – লেখার সকল শব্দের প্রথব বর্ণ বড় হাতের হবে।
উদাহরন হিসেবে নিচের কোড গুলো একটি এইচটিএমএল ফাইলে পেস্ট করে তারপর ব্রাউজারে দেখুন।
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
টেক্সট ইনডেনটেশন
পত্রিকায় আমরা প্রায় সময়ই দেখি প্রথম লাইনের শব্দটির আগে একটু গ্যাফ থাকে। এইচটিএমএল ফাইলে ঐরকম গ্যাফটা দেওয়া হয় text-indent দিয়ে। উদাহরন হিসেবে নিচের কোড গুলো একটি এইচটিএমএল ফাইলে পেস্ট করে তারপর ব্রাউজারে দেখুন।
p {
text-indent: 50px;
}
সকল সিএসএস টেক্সট প্রোপার্টি।
| পোপার্টি | বর্ণনা |
| color | লেখার রঙ নির্ধারন করার জন্য ব্যবহৃত হয়। |
| direction | আমরা ইংরেজী এবং বাংলা লিখি বাম থেকে ডানে, কোন কোন দেশের লেখা যেমন আরবী ডান থেকে বামে লিখতে হয়। এই ডান থেকে বামে হবে নাকি বাম থেকে ডান হবে তাই direction সিএসএস রুল দিয়ে সেট করা হয়। |
| letter-spacing | একটা বর্ণ থেকে আরেকটা বর্ণের দূরত্ব সেট করার জন্য এ property ব্যবহৃত হয়। |
| line-height | একটা লাইনের উচ্চতা কতটুকু হবে তা এটি দিয়ে নির্ধারন করা হয়। |
| text-align | লেখা গুলোর বিন্যাস / align কিভাবে হবে, ডানে নাকি বামে নাকি মধ্য খানে তাই সেট করা হয়। |
| text-decoration | একটা লেখার নিচে বা উপরে বা মাঝখান দিয়ে একটা লাইন দেওয়ার জন্য ব্যহৃত হয়। |
| text-indent | পত্রিকায় আমরা প্রায় সময়ই দেখি প্রথম লাইনের শব্দটির আগে একটু গ্যাফ থাকে। এইচটিএমএল ফাইলে ঐরকম গ্যাফটা দেওয়া হয় text-indent দিয়ে। |
| text-transform | ছোট অক্ষরের বা বড় অক্ষরের লেখা গুলোকে পরিবর্তন করার কাজে ব্যবহৃত হয়। |
| word-spacing | লেখার প্রতিটি শব্দের মধ্যে ফাঁক দেওয়ার কাছে ব্যহৃত হয়। |
এগুলো ছাড়াও আরো কিছু Property রয়েছে।
নিজে নিজে চেষ্টা করো
অনুশীলন ০১ঃ
পেজটির টেক্সট এর রঙ লাল এবং <h1> এর টেক্সট এর রঙ নীল নির্ধারণ করোঃ
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
অনুশীলন ০২ঃ
<h1> এর এলাইনমেন্ট সেন্টার নির্ধারণ করোঃ
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
অনুশীলন ০৩ঃ
লিঙ্কটি থেকে আনডারলাইন মুছে দাওঃ
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p><a href="css_text.asp">CSS text tutorial</a></p> </body> </html>
অনুশীলণ ৪ঃ
<h1> এর লেখাকে বড় হাতের অক্ষরে এবং <p> এর লেখাকে ক্যাপিটালাইজ (প্রথম অক্ষর বড় হাতের) করঃ
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
অনুশীলন ০৫ঃ
প্রথম লাইনকে 20px পরিমাণ ইনটেন্ড করোঃ
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</body> </html>
