কোন ওয়েব পেজে সবথেকে বেশী যে কন্টেন্ট ব্যবহার করা হয় তা হল লেখা বা text, তাই টেক্সট স্টাইলিং এর দিকে সবথেকে বেশী খেয়াল রাখা হয়। সিএসএস ব্যবহার করে যে কোন টেক্সট এলিমেন্ট যেমন - প্যারাগ্রাফ ট্যাগ বা হেডিং ট্যাগ সম্পূর্ণরূপে স্টাইল করা যায়।
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-indent ও text-shadow.
কোন লেখার রং নির্ধারণ করার জন্য সিএসএস এর color এবং text-color প্রোপার্টি ব্যবহার করা হয়।
নিচে একটি উদাহরন দেখুন, যেখানে সিএসএস color প্রোপার্টি ব্যবহার করে একটি লেখার রং নির্ধারণ করা হয়েছে।
p { color: forestgreen; }
নিচে একটি উদাহরন দেখুন, যেখানে সিএসএস text-color প্রোপার্টি ব্যবহার করে একটি লেখার রং নির্ধারণ করা হয়েছে।
p { text-color: forestgreen; }
নোট - color এবং text-color, এই ২ টি সিএসএস প্রোপার্টিই একই কাজ করে, তবে byte অর্থাৎ কম কোড এর জন্য color প্রোপার্টি ব্যবহার করাই ভাল।
সিএসএস এর colorcolor এবং text-color প্রপার্টিতে ৩ ভাবে রং নির্ধারণ করা যায়। সেগুলো হল -
সিএসএস সমর্থিত রঙের নাম ও রঙের মান জানতে আমাদের সিএসএস - রঙের নাম ও সিএসএস - রঙের মান টিউটোরিয়াল গুলো দেখুন।
সিএসএস এর background-color প্রোপার্টি ব্যবহার করে কোন এইচটিএমএল টেক্সট এলিমেন্টের পৃষ্ঠদেশে বা background এ রং সংযুক্ত করা যায়।
নিছে একটি উদাহরন দেখুন, যেখানে background-color প্রোপার্টি ব্যবহার করা হয়েছে।
h1 { background-color: teal; } p { background-color: forestgreen; }
নোট - W3C এর পরামর্শ অনুসারে কোন লেখার জন্য color প্রোপার্টি ব্যবহার করলে, সেখানে background-color প্রোপার্টি ও ব্যবহার করে মান নির্ধারণ করে দিতে হবে।
সিএসএস এর 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 প্রোপার্টি ব্যবহার করে কোন লেখার তে একটি আনুভূমিক রেখা যুক্ত করা যায় বা পূর্ব-নির্ধারিত বা 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 প্রোপার্টি ব্যবহার করতে কোন লেখার দিক পরিবরতন কর যায়।
নিচে একটি উদাহরন দেখুন।
h2 { direction: rtl; unicode-bidi: bidi-override; }
সিএসএস এর text-transform প্রোপার্টি ব্যবহার করে লেখাটি ছোট হাতের অক্ষর না বড় হাতের অক্ষরএ হবে তা নির্ধারণ করা যায়। text-transform প্রোপার্টির মান হতে পারে - capitalize, uppercase এবং lowercase.
নিচে একটি উদাহরন দেখুন।
h1.cap{ text-transform: capitalize; } h1.upp{ text-transform: uppercase; } h1.low{ text-transform: lowercase; }
কোন এলিমেন্ট এর vertical বা উলম্ব অবস্থান নির্ধারণ করার জন্য সিএসএস এর vertical-align প্রোপার্টি ব্যবহার করা হয়। অর্থাৎ সিএসএস এর এই প্রোপার্টি ব্যবহার করে কোন ছবি, লেখার উপরে কথায় অর্থাৎ লেখাটি কোন ছবির পিছনে কোথায় প্রদর্শিত হবে তা নির্ধারণ করে।
নিচে একটি উদাহরন দেখুন।
img.h1{ vertical-align: rtl; }
সিএসএস এর letter-spacing প্রোপার্টি ব্যবহার করে কোন লেখতে শব্দের বর্ণ বা letter গুলোর মাঝের ফাঁকা স্থান নির্ধারণ করা যায়। এর মান px বা em ব্যবহার করেও নির্ধারণ করা যায়।
নিচে একটি উদাহরন দেখুন।
p { letter-spacing: 3px; }
সিএসএস এর line-height প্রোপার্টি ব্যবহার করে লেখাতে লাইন গুলোর মধ্যবর্তী ফাঁকা স্থান (ওপর-নিচে) নির্ধারণ করা যায়।
নিচে একটি উদাহরন দেখুন।
p { line-height: 1.2; }
সিএসএস এর word-spacing প্রোপার্টি ব্যবহার করে কোন লেখাতে শব্দ বা word গুলোর মধ্যবর্তী ফাঁকা স্থান নির্ধারণ করা যায়।
নিচে একটি উদাহরন দেখুন।
h3 { word-spacing: 15px; }
সিএসএস এর white-space প্রোপার্টি ব্যবহার করে কোন লেখা বা text এ white-space এর অবস্থা নির্ধারণ করা যায়। word-spacing প্রোপার্টির মান গুলো হতে পারে normal, nowrap, pre, pre-line, pre-wrap, initial এবং inherit.
নিচে একটি উদাহরন দেখুন।
p.nowrap { white-space: nowrap; }
সিএসএস এর text-indent প্রোপার্টি ব্যবহার করে, কোন অনুচ্ছেদ বা লেখার প্রথম লাইন এর মার্জিন নির্ধারণ করা যায়।
নিচে একটি উদাহরন দেখুন।
p { text-indent: 40px; }
সিএসএস এর 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 |