ওয়েব ডিজাইন (পর্ব ০৭) টেক্সট, ফন্ট, আইকন

আস্‌সালামু আলাইকুম! আশা করি আল্লাহ এর অশেষ রহমতে আপনারা সবাই ভালো আছেন।আমিও আপনাদের দোয়াই ভালো আছি। আজকের নতুন টপিকে আপনাকে স্বাগতম! আজকে আপনাদের দেখাবো, টেক্সট, ফন্ট, আইকন।

টেক্সটঃ (Text)

কোনো লেখা আমরা যখন সিএসএস এর মাধ্যমে সুন্দর ভাবে প্রকাশ করতে চাই তখন আমাদের নিচের এই সিএসএস সম্পর্কে ভালো জ্ঞান রাখা অবশ্যই দরকার।

টেক্সট কালারঃ(Text Color)

যেকোনো লেখার কালার চেন্জ করতে হলে আমরা নিচের কোড ব্যবহার করবো।

  color: green;

ব্যকগ্রাউন্ড কালারঃ(Background Color)

আমাদের কন্টেন্টের তলদেশে কোনো কালার দেওয়ার জন্য এই ব্যকগ্রাউন্ড কালার কোড ইউজ করে থাকি।

  background-color: lightgrey;

টেক্সট এলাইনমেন্টঃ(Text Align)

আমাদের লেখা গুলোকে ডান পাশ, বাম পাশ ও মাঝে দেখাতে এই CSS ইউজ করা হয়।

text-align: center;
 text-align: left; 
 text-align: right; 
 text-align: justify;

টেক্সট ডেকোরেশেনঃ(Text Decoration)

টেক্সট ডেকোরেশন আসলে আন্ডার লাইন ওভার লাইন করার জন্য ইউজ করা হয়।এছাড়াও

আমরা যখন লিংকিং করি তখন আমাদের লিংক করা টেক্সট এর নিচেতে আন্ডার লাইন থাকে অটোমেটিক তা আমরা সরানোর জন্য এই টেক্সট ডেকোরেশন none ইউজ করে থাকি।

  text-decoration: underline;
  text-decoration: line-through;
  text-decoration: overline;
  text-decoration: none;

Text ট্রান্সফরমেশনসঃ(Text Transform)

আমাদের লেখা গুলো কে একাধারে বড় হাতের নাকি ছোট হাতের দেখাতে চান তা বুঝানোর জন্য এই সিএসএস ইউজ করা হয়।

  text-transform: uppercase;
  text-transform: lowercase;
  text-transform: capitalize;

Text স্পেসিংঃ(Text Spacing)

আমাদের ওয়েব পেজের লেখা গুলোকে বিভিন্ন ভাবে প্রদর্শনের জন্য বিভিন্ন ভাবে স্পেসিং করার প্রয়োজন হয়। নিচের সিএসএস গুলো বুঝলে স্পেসিং নিয়ে কোনো সমস্যা থাকবেনা।

লেটার স্পেসিংঃ(Letter Spacing)

লেখার মাঝে প্রতিটি লেটার বা অক্ষর ফাকা তৈরি করতে অথবা কাছাকাছি করতে লেটার স্পেসিং  ব্যবহার করা হয়।

  letter-spacing: 3px;

  letter-spacing: -3px;

লাইন হাইটঃ(Line Height)

পুরো লাইন এর নিচে কত নিচে পর পর লেখা প্রদর্শন হবে তা ঠিক করতে লাইন হাইট ব্যবহার করা হয়।

  line-height: 1.8;

ওয়ার্ড স্পেসিংঃ(Word Spacing)

প্রতিটি ওয়ার্ডকে আলাদা করার মতো করে ফাকা তৈরি করার জন্য ওয়ার্ড স্পেসিং টা ব্যবহার করা হয়।

  word-spacing: 10px;

  word-spacing: -5px;

হোয়াইট স্পেসঃ(White Space)

পুরো লেখা wrap না করতে চাইলে হোয়াইট স্পেস নো র‌্যাপ ব্যবহার করা হয়।

  white-space: nowrap;

ফন্টঃ(Fonts) 

ওয়েব পেজে লেখার আকৃতি বা লেখা ধরন চেন্জ করার জন্য ফন্ট ব্যবহার করা হয়।আমরা গুগল ফন্ট কিভাবে আমাদের সাইটে ইন্ট্রিগ্রেশন করা যায় এবং কিভাবে ব্যবহার করা যায় তাই আমরা দেখবো।

গুগল ফন্ট যুক্ত করাঃ(Google font Add)

প্রথমে fonts.google.com এ প্রবেশ করুন। তারপর পছন্দ মতো ফন্ট পছন্দ করে ওখান link ট্যাগ এর কোডটি হেড ট্যাগ এ বসাতে হবে। তারপর যেখানে এই ফন্ট টা প্রদর্শন করতে চাই সেই ট্যাগ বা ক্লাসে নিচের এই সিএসএসটা লিখতে হবে।অবশ্যই প্রতিটি ফন্ট এর আলাদা আলাদা নাম হয় সেই অনুযায়ী সিএসএস এ ভেলু লিখতে হয়।

font-family:arial;

আইকনঃ(Icon)

ওয়েব পেজে বিভিন্ন প্রয়োজনে আইকন ব্যবহার করা লাগে। আইকন নির্দিষ্ট চিন্হ যোগ করা যায়।

প্রথমে fontawesome.com এর CDN টা এড করে নিবেন।

নিচেতে cdn কোড দেওয়া হলোঃ

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"></link>

এবার ওয়েব সাইটে ব্যবহার করতে হলে এই লিংক থেকে আইকন পছন্দ করে ওই আইকনে ক্লিক করে কোড কপি করে ওয়েব পেজে ব্যবহার করুন।

নিচের কোড এর মতো করে।

<p><i class="fas fa-heart"></i> WIKIJANA <i class="fas fa-heart"></i></p>

এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি বুঝতে অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই আর্টিকেলটি WikiJana.Com সাইটের সম্পদ তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট কপিরাইটের অধিনে চলে যেতে পারে।