CSS Text Decoration: টেক্সটে আন্ডারলাইন, ওভারলাইন এবং স্ট্রাইকথ্রু যোগ করার গাইড

যখন আপনি একটি ওয়েব পেজের জন্য টেক্সট ডিজাইন করছেন, তখন আপনি টেক্সটে ডেকোরেশন (decoration) যোগ করতে চাইতে পারেন। উদাহরণস্বরূপ, আপনি গুরুত্বপূর্ণ কাজে আন্ডারলাইন (underline) যোগ করতে চাইতে পারেন, বা পুরনো টেক্সটে একটি লাইন স্ট্রাইকথ্রু (line-through) করতে চাইতে পারেন।

এখানেই CSS text-decoration প্রোপার্টি কাজে আসে। text-decoration প্রোপার্টি আপনাকে আন্ডারলাইন, ওভারলাইন (overline), এবং একটি টেক্সট ব্লকের মধ্য দিয়ে যাওয়া লাইন যোগ করতে দেয়।

এই টিউটোরিয়ালে উদাহরণসহ text-decoration প্রোপার্টি এবং এর তিনটি সাব-প্রোপার্টি কীভাবে ব্যবহার করে CSS-এ একটি টেক্সট ব্লকে ডেকোরেশন যোগ করতে হয় তা আলোচনা করা হয়েছে। এই টিউটোরিয়াল পড়া শেষে আপনি text-decoration প্রোপার্টি ব্যবহার করে টেক্সট ডেকোরেট করতে এক্সপার্ট হবেন।

CSS Text Decoration

আন্ডারলাইন, টেক্সটের মধ্য দিয়ে যাওয়া লাইন, এবং ওভারলাইন যোগ করে টেক্সট ডেকোরেট করা একটি গুরুত্বপূর্ণ উপায় যাতে আপনি একটি ওয়েব পেজের মূল কন্টেন্টের দিকে ব্যবহারকারীর দৃষ্টি আকর্ষণ করতে পারেন।

যখন টেক্সট আন্ডারলাইন করা হয়, তবে এটি ব্যবহারকারীকে নির্দেশ করে যে যা আন্ডারলাইন করা হয়েছে সেটি পড়ার যোগ্য। 덧붙ে, টেক্সট ডেকোরেশন একটি ওয়েব পেজে অ্যাক্সেসিবল (accessible) এক্সপেরিয়েন্স ডিজাইন করার একটি গুরুত্বপূর্ণ অংশ।

এটি কারণ শুধু ভিজুয়াল ইন্ডিকেটর যেমন রঙের ওপর নির্ভর করলে সেটি সকল ব্যবহারকারীর জন্য অ্যাক্সেসিবল হবে না, যেমন যারা রঙ ਅন্ধ (color blind) বা অনুরূপ দৃষ্টি সমস্যা আছে। একটি আন্ডারলাইন, স্ট্রাইকথ্রু, বা ওভারলাইন যোগ করলে একটি ব্যবহারকারীর যে কোনো একটি টেক্সট অংশ হাইলাইট করা হয়েছে তা লক্ষ্য করার সম্ভাবনা বাড়ে।

CSS-এ, text-decoration শর্টহ্যান্ড প্রোপার্টি আপনাকে টেক্সটে যোগ করা ডেকোরেশন নির্দিষ্ট করতে দেয়। এই প্রোপার্টি তিনটি অন্যান্য প্রোপার্টির শর্টহ্যান্ড, যা হলো:

text-decoration-line (আবশ্যক)
text-decoration-color (ঐচ্ছিক)
text-decoration-style (ঐচ্ছিক)

এই প্রোপার্টিগুলি text-decoration প্রোপার্টি ব্যবহার করার সময় কম্বাইন করা যেতে পারে আপনার কোড আরও দক্ষ করতে। প্রতিটি আলাদা আলাদা নির্দিষ্ট করার পরিবর্তে, আপনি নিচের সিনট্যাক্স ব্যবহার করে একটি টেক্সট ডেকোরেশন স্টাইল সংজ্ঞায়িত করতে পারেন:

text-decoration: line color style;

text-decoration প্রোপার্টির জন্য স্টাইলগুলো কোনো নির্দিষ্ট ক্রমে ظاهر হওয়া প্রয়োজন নেই।

এখন যেহেতু আমরা text-decoration শর্টহ্যান্ড প্রোপার্টির বেসিক জানি, চলুন এটি কীভাবে কাজ করে তার একটি উদাহরণের মাধ্যমে দেখি। এই টিউটোরিয়ালের জন্য, আমরা একটি স্থানীয় বেকেরির উদাহরণ ব্যবহার করব যারা তাদের নিজস্ব ওয়েবসাইট তৈরি করতে চান।

CSS Text Decoration উদাহরণ

যে স্থানীয় বেকেরির জন্য আমরা একটি সাইট ডেভেলপ করছি তারা অনুরোধ করেছে যে আমরা প্রতিটি পেজের টাইটেলগুলো হাইলাইট করি।

উদাহরণস্বরূপ, About পেজে, টাইটেল About Us-এ একটি আন্ডারলাইন থাকতে হবে, যাতে ব্যবহারকারীর দৃষ্টি টাইটেলের দিকে আকৃষ্ট হয়। প্রতিটি টাইটেলে একটি হালকা নীল সিঙ্গল আন্ডারলাইন থাকবে, এবং প্রতিটি লাইন 2px প্রস্থের হবে। আমরা নিচের কোড ব্যবহার করে এমন একটি টাইটেল তৈরি করতে পারি:

<html>
  <h1>About Us</h1>
  <style>
    h1 { text-decoration: lightblue solid underline; }
  </style>

CSS Text Decoration: টেক্সটে আন্ডারলাইন, ওভারলাইন এবং স্ট্রাইকথ্রু যোগ করার গাইড কোড এডিটরের উপরের বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।

আমাদের HTML কোডে, আমরা <h1> ট্যাগ ব্যবহার করে একটি হেডার সংজ্ঞায়িত করেছি যা ওয়েব পেজে About Us টেক্সট দেখায়। তারপর, আমাদের CSS কোডে, আমরা একটি রুল তৈরি করেছি যা আমাদের ওয়েব পেজের সকল <h1> এলিমেন্টে প্রযোজ্য। এই রুল text-decoration প্রোপার্টি ব্যবহার করে একটি আন্ডারলাইন তৈরি করে যা:

হালকা নীল রঙে ظاهر হয় (নির্দেশিত lightblue দ্বারা)
একটি সিঙ্গল লাইন আছে (নির্দেশিত solid দ্বারা)
underline স্টাইল ব্যবহার করে (নির্দেশিত underline দ্বারা)

এটি text-decoration প্রোপার্টি ব্যবহার করে তৈরি করা একটি আন্ডারলাইন এর একটি সহজ উদাহরণ। এখন, চলুন text-decoration প্রোপার্টি গঠনকারী প্রতিটি প্রোপার্টি অন্বেষণ করি।

Text Decoration Line (text-decoration-line)

text-decoration-line প্রোপার্টি আপনাকে সেই লাইনের টাইপ সেট করতে দেয় যা প্রোপার্টি প্রযোজ্য করা টেক্সটে ظاهر হবে। এই প্রোপার্টি যে মানগুলো গ্রহণ করে সেগুলি হলো:

underline: একটি টেক্সট ব্লকের নিচে ظاهر হওয়া একটি লাইন তৈরি করে।
overline: একটি টেক্সট ব্লকের উপরে ظاهر হওয়া একটি লাইন তৈরি করে।
line-through: একটি টেক্সট ব্লকের মাঝপথে ظاهر হওয়া একটি স্ট্রাইকথ্রু লাইন তৈরি করে।
blink: প্রোপার্টি প্রযোজ্য করা টেক্সটকে ব্লিংক (blink) করে (এই স্টাইলটি অবচিত/deprecated)।

যদি এই প্রোপার্টি অন্য কোনো টেক্সট ডেকোরেশন ছাড়া ব্যবহার করা হয়, তবে একটি স olid, সিঙ্গল, কালো আন্ডারলাইন ظاهر হবে।

বেকেরি উদাহরণে ফিরে আসি এটি ব্যাখ্যা করতে কীভাবে এই প্রোপার্টি কাজ করে। মান লইজिए বেকেরি, যাকে Jefferson's Family Bakery বলা হয়, আমাদের তাদের About Us পেজের টেক্সট স্টাইল করতে বলেছে। তারা তাদের টেক্সটের নির্দিষ্ট অংশগুলো আন্ডারলাইন করতে বলেছে।

আমরা text-decoration-line প্রোপার্টি ব্যবহার করে এই কাজটি সম্পন্ন করতে পারি। এখানে যে কোডটি আমরা ব্যবহার করব:

<html>
  <p>The Jefferson's Family Bakery, founded in 1899, is a family bakery that serves delicious baked goods to the people of Seattle, Washington. Our bakery is <span class="underline">most well-known for our bagels</span>, which have been reviewed highly by a number of local publications since we started selling them in 1950. Today, Jeffersons employs ten people who work tirelessly to make the breads, rolls, and assorted baked goods enjoyed by our customers. If you're in the mood for a good bagel, bread, or baked cake, <span class="underline">come to Jeffersons</span>!</p>
  <style>
    .underline { text-decoration-line: underline; }
  </style>

আমাদের কোড ব্রেক ডাউন করা যাক। আমাদের HTML কোডে, আমরা <p> ট্যাগের মধ্যে একটি প্যারাগ্রাফ টেক্সট তৈরি করেছি।

এই প্যারাগ্রাফের ভিতরে Jefferson's Family Bakery-এর একটি বিবরণ রয়েছে। 덧붙ে, দুটি শব্দ —most well-known for our bagels এবং come to Jeffersons— <span> ট্যাগের মধ্যে এনক্লোজড (enclosed), যা প্যারাগ্রাফের বাকি অংশ থেকে টেক্সটকে পৃথক করতে ব্যবহৃত হয়।

আমাদের CSS কোডে, আমরা একটি রুল সংজ্ঞায়িত করেছি যা underline ক্লাস 가진 সকল এলিমেন্টে প্রযোজ্য। সুতরাং, আমাদের কেসে, আমাদের সকল <span> ট্যাগ আমাদের সংজ্ঞায়িত স্টাইল ব্যবহার করে, কারণ প্রতিটি <span> ট্যাগও underline ক্লাসে অ্যাসাইন করা আছে। আমরা যে রুলটি সংজ্ঞায়িত করেছি সেটি text-decoration-line ব্যবহার করে আমরা যে টেক্সট হাইলাইট করতে চেয়েছি সেটিতে একটি সিঙ্গল কালো আন্ডারলাইন যোগ করে।

Text Decoration Color (text-decoration-color)

text-decoration-color প্রোপার্টি আপনাকে একটি স্টাইলে প্রযোজ্য টেক্সট ডেকোরেশনের রঙ সংজ্ঞায়িত করতে দেয়। মান লইজिए আমরা আমাদের গত উদাহরণে সংজ্ঞায়িত আন্ডারলাইনগুলোকে গ্রিন (green) রঙে দেখাতে চাই। আমরা নিচের স্টাইল ব্যবহার করে এটি করতে পারি:

<html>
  <p>The Jefferson's Family Bakery, founded in 1899, is a family bakery that serves delicious baked goods to the people of Seattle, Washington. Our bakery is <span class="underline">most well-known for our bagels</span>, which have been reviewed highly by a number of local publications since we started selling them in 1950. Today, Jeffersons employs ten people who work tirelessly to make the breads, rolls, and assorted baked goods enjoyed by our customers. If you're in the mood for a good bagel, bread, or baked cake, <span class="underline">come to Jeffersons</span>!</p>
  <style>
    .underline { text-decoration-line: underline; text-decoration-color: green; }
  </style>

আমাদের CSS কোডে, আমরা একটি text-decoration-color স্টাইল রুল যোগ করেছি যার মান green। এটি text-decoration-line ব্যবহার করে আমরা যে আন্ডারলাইন সংজ্ঞায়িত করেছি সেটির রঙ গ্রিন সেট করে।

আমরা text-decoration-line-এর জন্যও একটি মান নির্দিষ্ট করেছি, যা আমাদের লাইন স্টাইল তৈরি করার জন্য আবশ্যক।

Text Decoration Style (text-decoration-style)

text-decoration-style প্রোপার্টি আপনাকে একটি টেক্সট ব্লকে টেক্সট ডেকোরেশন কী স্টাইলে ظاهر হবে তা সেট করতে দেয়। text-decoration-style প্রোপার্টি নিচের যেকোনো একটি মান গ্রহণ করে:

solid: একটি সিঙ্গল লাইন তৈরি করে।
double: একটি ডবল লাইন তৈরি করে।
dashed: একটি ড্যাশড লাইন তৈরি করে।
dotted: একটি ডটেড লাইন তৈরি করে।
wavy: একটি ওয়েভি (wavy) লাইন তৈরি করে।

বেকেরি উদাহরণে ফিরে আসি। মান লইজिए বেকেরি আমাদের অনুরোধ করেছে About the Jeffersons হেডিং-এ একটি ডটেড আন্ডারলাইন যোগ করতে About Us পেজে। এই আন্ডারলাইন হালকা নীল রঙে থাকবে এবং ডটেড স্টাইল ব্যবহার করবে। আমরা নিচের কোড ব্যবহার করে এই আন্ডারলাইনটি তৈরি করতে পারি:

<html>
  <h2>About the Jeffersons</h2>
  <style>
    h2 { text-decoration-line: underline; text-decoration-color: lightblue; text-decoration-style: dotted; }
  </style>

আমাদের কোডে, আমরা text-decoration-line এবং text-decoration-color স্টাইল ব্যবহার করেছি আমাদের আন্ডারলাইন সংজ্ঞায়িত করতে এবং আন্ডারলাইনের রঙ হালকা নীল সেট করতে, যথাক্রমে। তারপর, আমরা text-decoration-style প্রোপার্টি ব্যবহার করেছি আমাদের আন্ডারলাইনের স্টাইল ডটেড সেট করতে।

হাইপারলিংক থেকে আন্ডারলাইন সরানো (Removing Underlines from a Hyperlink)

text-decoration প্রোপার্টি সাধারণত একটি ট্র্যাডিশনাল HTML লিংকে ظاهر হওয়া আন্ডারলাইন সরাতে ব্যবহৃত হয়। এটি কারণ text-decoration প্রোপার্টি none মান গ্রহণ করে, যা একটি এলিমেন্টে প্রযোজ্য ডিফল্ট টেক্সট স্টাইল সরাতে ব্যবহৃত হয়।

ডিফল্টভাবে, আপনি যখন <a> ট্যাগ ব্যবহার করে একটি লিংক সংজ্ঞায়িত করেন, একটি আন্ডারলাইন ظاهر হয়। যাইহোক, সব ওয়েবসাইট তাদের লিংকের নিচে আন্ডারলাইন দেখাতে চায় না।

মান লইজिए Jefferson's Family Bakery ওয়েবসাইটে একটি হাইপারলিংক রয়েছে যার লেবেল Contact Us, যা তাদের সাইটের /contact.html পেজে লিংক করে। এখানে হাইপারলিংকের জন্য HTML কোড:

<a href="/contact.html">Contact Us</a>

যখন আমরা এই কম্পোনেন্ট রেন্ডার করি, নিচের রেসপন্স ফেরত আসে: CSS Text Decoration: টেক্সটে আন্ডারলাইন, ওভারলাইন এবং স্ট্রাইকথ্রু যোগ করার গাইড কোড এডিটরের উপরের বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।

আপনি দেখতে পারেন, লিংকটি নীল রঙে এবং একটি আন্ডারলাইনসহ ظاهر হয়। আপনি যদি এই আন্ডারলাইন সরাতে চান, তবে আপনি নিচের কোড ব্যবহার করতে পারেন:

<html>
  <a href="/contact.html">Contact Us</a>
  <style>
    a { text-decoration: none; }
  </style>

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

উপসংহার (Conclusion)

টেক্সট ডেকোরেশন একটি উপায় যাতে আপনি একটি ওয়েব পেজের নির্দিষ্ট টেক্সটের দিকে দৃষ্টি আকর্ষণ করতে পারেন, এবং টেক্সটকে আরও সৌন্দর্যśীলভাবে দেখাতে পারেন।

CSS text-decoration প্রোপার্টি এবং এর সংশ্লিষ্ট প্রোপার্টিগুলি আপনাকে একটি ওয়েব পেজের একটি টেক্সট ব্লক দ্বারা ব্যবহৃত ডেকোরেশন সংজ্ঞায়িত করতে দেয়।

এই টিউটোরিয়ালে, উদাহরণের রেফারেন্স নিয়ে, text-decoration প্রোপার্টি এবং এর সংশ্লিষ্ট প্রোপার্টিগুলি কীভাবে ব্যবহার করে একটি ওয়েব পেজে টেক্সট ডেকোরেট করতে হয় তা আলোচনা করা হয়েছে। এখন আপনি পেশাদার ওয়েব ডিজাইনারের মত টেক্সট ডেকোরেট করা শুরু করার জন্য সজ্জিত!