CSS আমাদেরকে দৃষ্টিকটু কন্টেন্ট তৈরি করতে টেক্সট ফরম্যাট করতে দেয়। CSS ব্যবহার করে টেক্সট স্টাইল করতে নিম্নলিখিত বৈশিষ্ট্যগুলি ব্যবহার করা হয়।
রঙ
এই বৈশিষ্ট্যটি আমাদের পাঠ্যের রঙ পরিবর্তন করতে সহায়তা করে।
অক্ষর-ব্যবধান
এই বৈশিষ্ট্যটি অক্ষরের মধ্যে ব্যবধান সেট করতে ব্যবহৃত হয়।
লাইন-উচ্চতা
এই বৈশিষ্ট্য ব্যবহার করে একটি লাইনের উচ্চতা নির্দিষ্ট করা হয়।
পাঠ্য-সারিবদ্ধ
পাঠ্যের অনুভূমিক প্রান্তিককরণ পাঠ্য-সারিবদ্ধ বৈশিষ্ট্য দ্বারা নিয়ন্ত্রিত হয়।
টেক্সট-সজ্জা
আন্ডারলাইন, স্ট্রাইকথ্রু বা ওভারলাইন এবং স্টাইল করতে, পাঠ্য-সজ্জা ব্যবহার করা হয়।
টেক্সট-ইন্ডেন্ট
একটি উপাদানের প্রথম লাইনের ইন্ডেন্টেশন পাঠ্য-পরিচয় বৈশিষ্ট্য দ্বারা সেট করা হয়।
পাঠ্য-ছায়া
পাঠ্যের চারপাশে একটি ছায়া প্রদর্শন করতে, পাঠ্য-ছায়া বৈশিষ্ট্য ব্যবহার করা হয়।
টেক্সট-ট্রান্সফর্ম
টেক্সটের কেস টেক্সট-ট্রান্সফর্ম প্রপার্টি দিয়ে সেট করা যেতে পারে।
শব্দ-ব্যবধান
এই সম্পত্তি দিয়ে শব্দের মধ্যে স্থান নির্ধারণ করা যেতে পারে।
সিনট্যাক্স
ফন্ট-ভেরিয়েন্ট সম্পত্তির সিনট্যাক্স নিম্নরূপ -
Selector {
font-variant: /*value*/
} উদাহরণ
নিম্নলিখিত উদাহরণগুলি 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> আউটপুট
এটি নিম্নলিখিত আউটপুট দেয়---
