সিএসএস টিউটোরিয়ালঃ ১১তম পর্ব(লাইন হাইট এবং টেক্সট ইনডেন্ট)

0
305 বার দেখা হয়েছে।

সিএসএস ধারাবাহিক টিউটোরিয়ালের এই পর্বে আলোচনা করবো লাইন হাইট এবং টেক্সট ইনডেন্ট নিয়ে। তো চলুন…

Line Height:

একটি প্যারাগ্রাফ বা একাধিক লাইনের মধ্যে (টপ টু বোটম) স্পাসিং/ফাঁকা রাখার জন্য line-height প্রোপার্টি ইউজ করা হয় এবং ভ্যালু হিসেবে length measurement (px/in etc)/percentage (10% etc) অ্যাপ্লাই করতে হবে। মনে রাখতে হবে, কোন ইলিমেন্টের লাইন হাইট উক্ত ইলিমেন্টের ফন্ট সাইজ এর উপরে নির্ভর করে।  কোন ইলিমেন্টের লিখার মাঝে লাইন হাইট দিতে নিচের স্টাইলটি অ্যাপ্লাই করতে হবেঃ

Note: উপরের কোড টুকুর আউটপুট ব্রাউজার এ ঠিকমতো দেখায় কিনা সেটা প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু হুবহু নিজের হাতে লিখুন, ভুলেই কপি-পেস্ট করবেন না। ফাইলের নাম দিন csslineheight বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন। মনে রাখতে হবে, প্রতিটি HTML ডকুমেন্ট .html ফরমেটে (Save) সংরক্ষণ করতে হবে। এবার ডাবল ক্লিক করে ব্রাউজারে ওপেন করুন। সব কিছু ঠিক থাকলে নিচের মত প্রদর্শন করবে…

Text-indent:

কোন একটি প্যারাগ্রাফ এর প্রথম লাইনের শুরুতে ঠিক কতটুকু মার্জিন থাকবে সেটা নির্দেশ করতেই text-indent প্রোপার্টি এবং ভ্যালু হিসেবে Length measurement/percentage ব্যবহার করা হয়। কোন প্যারাগ্রাফ এর লাইনের শুরুতে টেক্সট ইনডেন্ট দিতে নিচের স্টাইলটি অ্যাপ্লাই করতে হবেঃ

Note: উপরের কোড টুকুর আউটপুট ব্রাউজার এ ঠিকমতো দেখায় কিনা সেটা প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু হুবহু নিজের হাতে লিখুন, ভুলেই কপি-পেস্ট করবেন না। ফাইলের নাম দিন textindent বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন। মনে রাখতে হবে, প্রতিটি HTML ডকুমেন্ট .html ফরমেটে (Save) সংরক্ষণ করতে হবে। এবার ডাবল ক্লিক করে ব্রাউজারে ওপেন করুন। সব কিছু ঠিক থাকলে নিচের মত প্রদর্শন করবে…

বুঝতে কোথাও সমস্যা হলে আমার ফেসবুক গ্রুপেপেজে অথবা ব্লগের জিজ্ঞাসা পাতা’য় জানাতে পারেন।  🙂

Series Navigation<< সিএসএস টিউটোরিয়ালঃ ১০ম পর্ব(ফন্ট ভেরিয়েন্ট এবং ফন্ট কালার)সিএসএস টিউটোরিয়ালঃ ১২তম পর্ব(টেক্সট এ্যালাইনমেন্ট) >>
Print Friendly, PDF & Email

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.