ওয়েব ডিজাইন CSS Part-6 (CSS Text Style) - প্রিয়লেখা

ওয়েব ডিজাইন CSS Part-6 (CSS Text Style)

Md. Sajal
Published: September 19, 2016

CSS TEXT

ওয়েব সাইটের প্রধান উপাদান হচ্ছে Text । তাই CSS এ আরো বেশ কিছু প্রোপার্টিজ আছে যেগুলি দিয়ে  Text  কে নানাভাবে সাজানো যায়।

Text Color
আমরা সাধারণত HTML এর মাধ্যমে Text ব্যবহারের জন্য <P>, <h1>,<h2>,<a> সহ আরো কিছু ট্যাগ ব্যবহার করি। এসকল Text  এর কালার নির্ধারণের জন্য –

p { color: #555;}
p  {color: red;}
p {color: rgb(255,0,0);}

Text Align
ওয়েব পেজে text  কে সাজানোর জন্য text alignment ব্যবহার করা হয়। Text কে পেজের left পাশে রাখার জন্য Declaration করতে হবে text-align:left; অনুরূপভাবে right পাশে রাখার জন্য   text-align:right;  center রাখার জন্য text-align:center; । যদি text এর প্রতিটা লাইন একই আকারে সাজাতে চাই তাহলে text-align:justify ।

p {text-align:center;}

Text Transform
Text অন্তর্ভূক্ত অক্ষর সমূহকে বড় হাতের বা ছোট হাতের অক্ষরে অথবা প্রতিটি শব্দের প্রথম অক্ষর বড় হাতের অক্ষরে রূপান্তরের জন্য text-transform ব্যবহার করা হয়।

p {text-transform:uppercase; }
h2 {text-transform:uppercase; }
h3 {text-transform:capitalize;}

Text Decoration
text-decoration একটা কাজের প্রোপার্টি, এটা দিয়ে টেক্সট এর নিচে রেখা টেনে দেয়া, মাঝ দিয়ে রেখা টানা ইত্যাদি করা হয়।

এর মান বাই ডিফল্ট none থাকে। এটা থাকলে নরমাল থাকবে।
মান underline দিলে ঐ এলিমেন্টের সব লেখার নিচে রেখা দেখাবে।
overline দিলে উপরে রেখাটি দেখাবে
line-through দিলে মাঝ দিয়ে রেখাটি চলে যাবে

text-decoration : underline;

Other’s

text-indent প্রোপার্টি দিয়ে একটা এলিমেন্টে যে টেক্সট আছে সেটার প্রথম লাইনকে আড়াআড়ি ভাবে সরিয়ে দেয়া যায়। পিক্সেল কিংবা শতকরা মান দিতে পারেন। যেমন

p{text-indent : 200px;}

line-height দিয়ে ঠিক করা যায় যে লাইনগুলির উচ্চতা কেমন হবে।

line-height: 2;
/* or */
line-height:20px;

20px দিয়ে তো বোঝাই যাচ্ছে লাইনের উচ্চতা ২০ পিক্সেল করে হবে। line-height : 2 দিয়ে বোঝায় টেক্সটের উচ্চতার ২ গুন বেশি হবে এক একটা লাইনের উচ্চতা।

letter-spacing দিয়ে অক্ষরের মাঝে দুরত্ব বাড়ানো যায়।

letter-spacing : 20px;

বাই ডিফল্ট এটারও মান normal থাকে।

word-spacing দিয়ে letter-spacing এর মতই কাজ হবে শুধু এটা দিয়ে শব্দের মধ্যে দুরত্ব কমানো বাড়ানো যায়।

word-spacing: 20px;