CSS আমাদেরকে দৃশ্যমানভাবে আকর্ষণীয় কন্টেন্ট তৈরি করতে টেক্সট ফরম্যাট করতে দেয়। CSS ব্যবহার করে টেক্সট স্টাইল করার জন্য নিচের প্রপার্টিগুলো ব্যবহৃত হয়।
color
এই প্রপার্টি টেক্সট রঙ পরিবর্তন করতে সাহায্য করে।
letter-spacing
এই প্রপার্টি অক্ষরগুলোর মধ্যবর্তী স্পেসিং সেট করতে ব্যবহৃত হয়।
line-height
একটি লাইনের উচ্চতা এই প্রপার্টি দ্বারা নির্দিষ্ট করা হয়।
text-align
টেক্সটের অনুভূমিক অ্যালাইনমেন্ট text-align প্রপার্টি দ্বারা নিয়ন্ত্রিত হয়।
text-decoration
আন্ডারলাইন, স্ট্রাইকথ্রু বা ওভারলাইন এবং সেটিকে স্টাইল করতে text-decoration ব্যবহৃত হয়।
text-indent
এলিমেন্টের প্রথম লাইনের ইন্ডেন্টেশন text-indent প্রপার্টি দ্বারা সেট করা হয়।
text-shadow
টেক্সটের চারদিকে শ্যাডো দেখাতে text-shadow প্রপার্টি ব্যবহৃত হয়।
text-transform
টেক্সটের কেস (uppercase, lowercase ইত্যাদি) text-transform প্রপার্টি দ্বারা সেট করা যায়।
word-spacing
শব্দগুলোর মধ্যবর্তী স্পেস এই প্রপার্টি দ্বারা সেট করা যায়।
সিনট্যাক্স
font-variant প্রপার্টির সিনট্যাক্স নিম্নরূপ:
Selector { font-variant: /*মান*/ }
উদাহরণ
নিচের উদাহরণগুলো CSS-এ টেক্সট ফরম্যাটিং উদাহরণ দেয়:
<!DOCTYPE html> <html> <head> <style> h2::before { content: "DEMO "; text-align: center; text-decoration: line-through; color: orange; } article { width: 600px; text-align: justify; text-shadow: -10px -5px lightgreen; } </style> </head> <body> <h2>Example Heading</h2> <article>This is demo text. Here, we are displaying different ways to format text.</article> </body> </html>
আউটপুট
এটি নিচের আউটপুট দেয়:
আরেকটি উদাহরণ
<!DOCTYPE html> <html> <head> <style> div { margin: 10px; display: flex; float: left; word-spacing: 30px; box-shadow: inset 0 0 6px violet; } div::after { content: " "; border: 8px solid green; } div + div{ background-color: indianred; width: 200px; color: white; text-align: justify; } </style> </head> <body> <div>SAS stands for Statistical Analysis Software. It was created in the year 1960 by the SAS Institute.</div> <div>SAS is a leader in business analytics. Through innovative analytics it caters to business intelligence and data management software and services.</div> </body> </html>
আউটপুট
এটি নিচের আউটপুট দেয়:
