CSS দিয়ে <hr> এলিমেন্টের মোটা যোগাদ করা: একটি কুইক গাইড

<hr> ট্যাগ একটি ওয়েব পেজে হরিজন্টাল লাইন আঁকতে ব্যবহৃত হয়। এই ট্যাগ একটি ওয়েব পেজের কন্টেন্ট আলাদা করার জন্য হরিজন্টাল লাইন আঁকার সবচেয়ে উপযোগী HTML ট্যাগের একটি। এই গাইডে, আমরা CSS ব্যবহার করে <hr> ট্যাগের মোটা যোগাদ পরিবর্তন করার বিভিন্ন পদ্ধতি শিখব।

সিনট্যাক্স

hr { height: value; border: value; }

HTML-এ hr ট্যাগ

<hr> ট্যাগ står horizontal rule-এর জন্য। এটি একটি সেলফ-ক্লোজিং ট্যাগ যা একটি হরিজন্টাল লাইন ব্যবহার করে ওয়েব পেজের বিভিন্ন সেকশনের মধ্যে একটি ভিজ্যুয়াল ডিভাইডার তৈরি করে।

উদাহরণ

<!DOCTYPE html> <html> <head> <style> hr { margin: 20px 0; } </style> </head> <body> <p>Section 1</p> <hr> <p>Section 2</p> </body> </html>

সঠিক স্পেসিংসহ একটি থিন হরিজন্টাল লাইন দ্বারা পৃথক করা দুটি টেক্সট সেকশন।

পদ্ধতি ১: Height প্রপার্টি ব্যবহার করে

এই পদ্ধতিতে, আমরা <hr> ট্যাগের মোটা যোগাদ পরিবর্তন করতে সরাসরি CSS-এর height প্রপার্টি ব্যবহার করি। এই পদ্ধতি হরিজন্টাল লাইন কতটা মোটা দেখাবে সেটা কন্ট্রোল করে।

উদাহরণ

<!DOCTYPE html> <html> <head> <style> hr { height: 5px; background-color: black; border: none; margin: 20px 0; } </style> </head> <body> <p>Above the line</p> <hr> <p>Below the line</p> </body> </html>

একটি মোটা ৫px ব্ল্যাক হরিজন্টাল লাইন দ্বারা পৃথক করা দুটি টেক্সট সেকশন।

পদ্ধতি ২: Border প্রপার্টি ব্যবহার করে

এই পদ্ধতিতে, আমরা CSS-এর border-top বা border-bottom প্রপার্টি ব্যবহার করি একটি মোটা হরিজন্টাল লাইন তৈরি করতে। এই পদ্ধতি আরও ফ্লেক্সিবল এবং ড্যাশড বা ডটেড লাইনের মতো বিভিন্ন ডিজাইন সাপোর্ট করে।

উদাহরণ

<!DOCTYPE html> <html> <head> <style> hr { border: none; border-top: 6px solid blue; margin: 20px 0; } </style> </head> <body> <p>Above the Line</p> <hr> <p>Below the Line</p> </body> </html>

একটি মোটা ৬px ব্লু হরিজন্টাল লাইন দ্বারা পৃথক করা দুটি টেক্সট সেকশন।

তুলনা

উপসংহার

আপনি সহজে CSS ব্যবহার করে <hr> ট্যাগের মোটা যোগাদ পরিবর্তন করতে পারেন। height পদ্ধতি স olid লাইনের জন্য সরল, অন্যদিকে border পদ্ধতি আরও স্টাইলিং ফ্লেক্সিবিলিটি অফার করে। আপনার ডিজাইন প্রয়োজনীয়তা অনুযায়ী বেছে নিন।