একটি HTML টেবিলকে CSS এর সাহায্যে সুন্দরভাবে উপস্থাপন করা যায়। নিম্নে একটি টেবিলের উদাহরণ দেয়া হলো:

টেবিল বর্ডার (Borders)

CSS এ টেবিল বর্ডার যোগ করার জন্য border property ব্যবহার করতে হবে।
নিম্নে উদাহরণে <table>, <th>, এবং <td> এলিমেন্টে কালো (black) বর্ডার যোগ করা হয়েছে:

table, th, td {
   border: 1px solid black;
}

উপরোক্ত উদাহরণে টেবিলটিতে double border যুক্ত হয়েছে, কেননা টেবিল এবং <th>/<td> এলিমেন্টে উভয়ের অলাদা বর্ডার রয়েছে।

এখন, টেবিলটিতে single border দেখাতে চাইলে border-collapse property যোগ করতে হবে।

Collapse Borders

border-collapse property এর সাহায্যে টেবিলের বর্ডার single অথবা separated হবে তা নির্ধারণ করা হয়। নিম্নের উদাহরনে টেবিলে single বর্ডার দেখানো হয়েছে:

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

টেবিলের Table Width এবং Height

width এবং height properties এর সাহায্যে টেবিলের Width ও Height নির্দিষ্ট করা যায়।
নিম্নের উদাহরণে টেবিলের Width 100% এবং <th> এলিমেন্টের Height 50px নির্দিষ্ট করা হয়েছে:

table {
    width: 100%;
}

th {
    height: 50px;
}

Horizontal Text Alignment

text-align property এর সাহায্যে Text এর Alignment left, right বা center নির্দিষ্ট করা যায়।

সাধারণত, <th> এলিমেন্টের ক্ষেত্রে Text এর Alignment থাকে center Align, <td> এলিমেন্টের ক্ষেত্রে Text এর Alignment থাকে left Align.

নিম্নের উদাহরণে <th> এলিমেন্টের ক্ষেত্রে Text এর Alignment, left এ নির্দিষ্ট করা হয়েছে:

th {
    text-align: left;
}

Vertical Text Alignment

vertical-align property এর সাহায্যে টেবিলে সেলের vertical alignment নির্ধারণ করা হয়।

এক্ষেত্রে সেলের Text Alignment top, bottom অথবা middle নির্ধারণ করা হয়। (<th> এবং <td> উভয় এলিমেন্ট এর জন্য)

নিম্নের উদাহরণে <td> এলিমেন্টের এর জন্য Text এর vertical Alignment, bottom এ নির্দিষ্ট করা হয়েছে:

td {
    height: 50px;
    vertical-align: bottom;
}

টেবিল Padding

টেবিল বর্ডার এবং content এর মাঝখানের space নির্ধারণ করার জন্য <td> and <th> এলিমেন্টে padding property ব্যবহার করা হয়।

td {
    padding: 15px;
}

টেবিল Color

নিচের উদাহরণে টেবিলের বর্ডার Color যোগ করার জন্য “border:” property ব্যবহার করা হয়েছে।

<th> এলিমেন্টে background color যোগ করার জন্য “background-color:” property ব্যবহার করা হয়।

table, td, th {
    border: 1px solid green;
}

th {
    background-color: green;
    color: white;
}

এইচটিএমএল এলিমেন্টের ভিতরের টেক্সটের আকার, ফন্ট, গাঢ়তা ইত্যাদি পরিবর্তন এবং সাজাতে সিএসএস ফন্ট গুরত্বপূর্ল। এজন্য বেশ কিছু সিএসএস প্রোপার্টিজ আছে যেগুলির বহুল ব্যবহার প্রচলিত। নিচের সেগুলির উদাহরনসহ আলোচনা করা হলঃ

Serif এবং Sans-Serif ফন্ট এর মধ্যে পার্থক্য

ফন্ট পরিবার (Font Family)

font-family প্রোপার্টিজ দিয়ে এলিমেন্টের ফন্ট কি হবে সেটা ঠিক করা যায়। একসাথে একাধিক ফন্ট কমা (,) দিয়ে দেয়া যায়। এক্ষেত্রে ব্রাউজার আগে প্রথমটি খুজবে যদি সিস্টেমে না পায় (অর্থ্যাৎ আপনার পিসিতে ফন্টটি ইনস্টল না থাকে) তখন পরেরটি দেখবে এভাবে..। যদি একটি না পায় তখন প্রথম ফন্টটি যে পরিবারের সদস্য সেই পরিবারের একটা ফন্ট প্রয়োগ করবে।

font-family: Verdana, SolaimanLipi;

font-size দিয়ে ঠিক করা যায় এলিমেন্টের ভিতরের টেক্সট এর সাইজ বা আকার কত বড় হবে। px বা em ইউনিট দিয়ে যেকোন মান দিতে পারেন যেমনঃ
font-size:18px;
বা,
font-size: 2em;

(কত em এ কত পিক্সেল এগুলি গুগলে সার্চ দিলে হাজারটা সমাধান পাবেন)

font-weight দিয়ে ফন্টটি দেখতে কত গাঢ় হবে সেটা ঠিক করা যায়। এর মান হতে পারে “normal”, “bold”, “bolder”, “lighter”, “inherit” এবং 100, 200, 300 …900। বেশিরভাগ সময়ে লেখা একটু বোল্ড করতে bold মানটি ব্যবহৃত হয়। মানগুলি দেখেই বোঝা যায় কোনটা দিলে টেক্সট দেখতে কেমন হবে।

font-weight: bold;

font-style সাধারনত ইটালিক করার জন্য ব্যবহৃত হয় তবে এর আরো ৩টি মান দেয়া যায়ঃ

1. font-style:italic;
2. font-style : oblique;
3. font-style : normal;
4. font-style: inherit;

লেখা ফরম্যাটিং

ওয়েব সাইট তো কত গুলো টেক্সট আর ইমেজের সমষ্টি তাই না? লেখা গুলোকে যে যত সুন্দর করে দেখাতে পারে তার ওয়েব সাইট তত সুন্দর হয়। 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;
}

সকল সিএসএস টেক্সট প্রোপার্টি।

এগুলো ছাড়াও আরো কিছু 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>