সিএসএস লেখার স্টাইল - CSS Text Style


কোন ওয়েব পেজে সবথেকে বেশী যে কন্টেন্ট ব্যবহার করা হয় তা হল লেখা বা text, তাই টেক্সট স্টাইলিং এর দিকে সবথেকে বেশী খেয়াল রাখা হয়। সিএসএস ব্যবহার করে যে কোন টেক্সট এলিমেন্ট যেমন - প্যারাগ্রাফ ট্যাগ বা হেডিং ট্যাগ সম্পূর্ণরূপে স্টাইল করা যায়।

Text Example

websSchool.com is a free bangla website for learning web design. vesit https://www.websschool.com



টেক্সট প্রপার্টি

কোন লেখাকে সাজানো বা স্টাইল করার জন্য সিএসএস এর বেস কিছু প্রোপার্টি আছে, সেগুলো হল color, text-color, background-color, text-align, text-decoration, direction, unicode-bidi, text-transform, vertical-align, letter-spacing, line-height, word-spacing, white-space, text-indenttext-shadow.


color এবং text-color প্রোপার্টি

কোন লেখার রং নির্ধারণ করার জন্য সিএসএস এর color এবং text-color প্রোপার্টি ব্যবহার করা হয়।

নিচে একটি উদাহরন দেখুন, যেখানে সিএসএস color প্রোপার্টি ব্যবহার করে একটি লেখার রং নির্ধারণ করা হয়েছে।

উদাহরণ

p {
  color: forestgreen;
  }

কোড এডিটর


নিচে একটি উদাহরন দেখুন, যেখানে সিএসএস text-color প্রোপার্টি ব্যবহার করে একটি লেখার রং নির্ধারণ করা হয়েছে।

উদাহরণ

p {
  text-color: forestgreen;
  }

কোড এডিটর


নোট - color এবং text-color, এই ২ টি সিএসএস প্রোপার্টিই একই কাজ করে, তবে byte অর্থাৎ কম কোড এর জন্য color প্রোপার্টি ব্যবহার করাই ভাল।

সিএসএস এর colorcolor এবং text-color প্রপার্টিতে ৩ ভাবে রং নির্ধারণ করা যায়। সেগুলো হল -

সিএসএস সমর্থিত রঙের নাম ও রঙের মান জানতে আমাদের সিএসএস - রঙের নামসিএসএস - রঙের মান টিউটোরিয়াল গুলো দেখুন।


background-color প্রোপার্টি

সিএসএস এর background-color প্রোপার্টি ব্যবহার করে কোন এইচটিএমএল টেক্সট এলিমেন্টের পৃষ্ঠদেশে বা background এ রং সংযুক্ত করা যায়।

নিছে একটি উদাহরন দেখুন, যেখানে background-color প্রোপার্টি ব্যবহার করা হয়েছে।

উদাহরণ

h1 {
   background-color: teal;
   }
p  {
   background-color: forestgreen;
   }

কোড এডিটর


নোট - W3C এর পরামর্শ অনুসারে কোন লেখার জন্য color প্রোপার্টি ব্যবহার করলে, সেখানে background-color প্রোপার্টি ও ব্যবহার করে মান নির্ধারণ করে দিতে হবে।


text-align প্রোপার্টি

সিএসএস এর text-align প্রোপার্টি ব্যবহার করে কোন লেখার অবস্থান নির্ধারণ করা যায়। এর যে সকল মান নির্ধারণ করা যায়, সেগুলো হল - left, right, center এবং justify.

নিচে একটি উদাহরন দেখুন।

উদাহরণ

h1{
  text-align: left;
  }

h2{
  text-align: right;
  }

h3{
  text-align: center;
  }

কোড এডিটর


সিএসএস এর text-align প্রোপার্টির মান justify নির্ধারণ করা হলে, লেখা গুলো ওয়েব পেজে এমন ভাবে প্রদর্শিত হয়, যেন লেখা গুলো দুই পাসে প্রসারিত করা হয় যাতে প্রতিটি লাইনের সমান প্রস্থ থাকে এবং বাম এবং ডান প্রান্তটি সোজা হয়। ম্যাগাজিন এবং সংবাদপত্রগুলিতে এরকম স্টাইল এর লেখা হয়।

নিচে একটি উদাহরন দেখুন।

উদাহরণ

h1{
  text-align: justify;
  }

কোড এডিটর



text-decoration প্রোপার্টি

সিএসএস এর text-decoration প্রোপার্টি ব্যবহার করে কোন লেখার তে একটি আনুভূমিক রেখা যুক্ত করা যায় বা পূর্ব-নির্ধারিত বা default ভাবে যুক্ত আনুভূমিক রেখা বাদ দেয়া যায়। এই প্রোপার্টির সম্ভাব্য মান হতে পারে - overline, middle এবং underline.

নিচে একটি উদাহরন দেখুন।

উদাহরণ

h1 {
   text-decoration: overline;
   }
   
h2 {
   text-decoration: middle;
   }
   
h3 {
   text-decoration: underline;
   }

কোড এডিটর


যখন একটি লিংক তইরি করা হয়, ব্রাউজার পূর্ব-নির্ধারিত ভাবেই <a> ... </a> ট্যাগের মধ্যস্থিত লেখার নিচে একটি আনুভূমিক রেখা প্রদর্শন করে। এই রেখাকে বাদ দেবার জন্য নিচে একটি উদাহরন দেখুন, যেখানে text-decoration প্রোপার্টির মান none ব্যবহার করা হয়েছে।

উদাহরণ

a {
  text-decoration: none;
  }

কোড এডিটর



direction ও unicode-bidi প্রোপার্টি

সিএসএস এর direction ও unicode-bidi প্রোপার্টি ব্যবহার করতে কোন লেখার দিক পরিবরতন কর যায়।

নিচে একটি উদাহরন দেখুন।

উদাহরণ

h2 {
   direction: rtl;
   unicode-bidi: bidi-override;
   }

কোড এডিটর



text-transform প্রোপার্টি

সিএসএস এর text-transform প্রোপার্টি ব্যবহার করে লেখাটি ছোট হাতের অক্ষর না বড় হাতের অক্ষরএ হবে তা নির্ধারণ করা যায়। text-transform প্রোপার্টির মান হতে পারে - capitalize, uppercase এবং lowercase.

নিচে একটি উদাহরন দেখুন।

উদাহরণ

h1.cap{
    text-transform: capitalize;
    }

h1.upp{
    text-transform: uppercase;
	}

h1.low{
    text-transform: lowercase;
	}

কোড এডিটর



vertical-align প্রোপার্টি

কোন এলিমেন্ট এর vertical বা উলম্ব অবস্থান নির্ধারণ করার জন্য সিএসএস এর vertical-align প্রোপার্টি ব্যবহার করা হয়। অর্থাৎ সিএসএস এর এই প্রোপার্টি ব্যবহার করে কোন ছবি, লেখার উপরে কথায় অর্থাৎ লেখাটি কোন ছবির পিছনে কোথায় প্রদর্শিত হবে তা নির্ধারণ করে।

নিচে একটি উদাহরন দেখুন।

উদাহরণ

img.h1{
  vertical-align: rtl;
  }

কোড এডিটর



letter-spacing প্রোপার্টি

সিএসএস এর letter-spacing প্রোপার্টি ব্যবহার করে কোন লেখতে শব্দের বর্ণ বা letter গুলোর মাঝের ফাঁকা স্থান নির্ধারণ করা যায়। এর মান px বা em ব্যবহার করেও নির্ধারণ করা যায়।

নিচে একটি উদাহরন দেখুন।

উদাহরণ

p {
  letter-spacing: 3px;
  }

কোড এডিটর



line-height প্রোপার্টি

সিএসএস এর line-height প্রোপার্টি ব্যবহার করে লেখাতে লাইন গুলোর মধ্যবর্তী ফাঁকা স্থান (ওপর-নিচে) নির্ধারণ করা যায়।

নিচে একটি উদাহরন দেখুন।

উদাহরণ

p {
  line-height: 1.2;
  }

কোড এডিটর



word-spacing প্রোপার্টি

সিএসএস এর word-spacing প্রোপার্টি ব্যবহার করে কোন লেখাতে শব্দ বা word গুলোর মধ্যবর্তী ফাঁকা স্থান নির্ধারণ করা যায়।

নিচে একটি উদাহরন দেখুন।

উদাহরণ

h3 {
   word-spacing: 15px;
   }

কোড এডিটর



white-space প্রোপার্টি

সিএসএস এর white-space প্রোপার্টি ব্যবহার করে কোন লেখা বা text এ white-space এর অবস্থা নির্ধারণ করা যায়। word-spacing প্রোপার্টির মান গুলো হতে পারে normal, nowrap, pre, pre-line, pre-wrap, initial এবং inherit.

নিচে একটি উদাহরন দেখুন।

উদাহরণ

p.nowrap {
   white-space: nowrap;
}

কোড এডিটর



text-indent প্রোপার্টি

সিএসএস এর text-indent প্রোপার্টি ব্যবহার করে, কোন অনুচ্ছেদ বা লেখার প্রথম লাইন এর মার্জিন নির্ধারণ করা যায়।

নিচে একটি উদাহরন দেখুন।

উদাহরণ

p {
   text-indent: 40px;
  }

কোড এডিটর



text-shadow প্রোপার্টি

সিএসএস এর text-shadow প্রোপার্টি ব্যবহার করে কোন লেখাতে ছায়া বা shadow এফেক্ট যুক্ত করা যায়।

নিচে একটি উদাহরন দেখুন।

উদাহরণ

h2 {
   text-shadow: 3px 3px green;
}

কোড এডিটর


নিচের উদাহরনে, তৃতীয় মানটি ছায়া বা shadow তে blar এফেক্ট তৈরি করেছে।

উদাহরণ

h2 {
   text-shadow: 3px 3px 6px green;
   }

কোড এডিটর



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

সিএসএস এর সকল টেক্সট প্রোপার্টি গুলোর কাজ এবং মান, নিচে দেখুন।

প্রোপার্টিমানবর্ণনা
color
background-color
text-align
text-decoration
direction
unicode-bidi
text-transform
vertical-align
letter-spacing
line-height
word-spacing
white-space
text-indent
text-shadow