HTML <style> এলিমেন্ট কীভাবে ব্যবহার করবেন তা শিখুন।
<style> এলিমেন্টটি আপনার HTML ডকুমেন্টে সরাসরি স্টাইল এম্বেড করার জন্য ব্যবহৃত হয়:
<style> h1 { color: red; } p { color: green; } </style><style> এলিমেন্টটি আপনার HTML ডকুমেন্টের <head> এলিমেন্টের ভিতরে থাকে:
<!DOCTYPE html> <html> <head> <style> h1 { color: red; } p { color: green; } </style> </head> <body> <h1>এটি একটি লাল হেডিং</h1> <p>এটি একটি সবুজ প্যারাগ্রাফ</p> </body> </html>আপনি এক্সটার্নাল স্টাইলশীটও ইম্পোর্ট করতে পারেন, যা <link> এলিমেন্ট দিয়ে করা হয়। বড় ওয়েবসাইটের জন্য এটি সাধারণত পছন্দনীয় পদ্ধতি।
জানা দরকার:
একই ডকুমেন্টে <style> এবং <link> উভয়েই ব্যবহার করলে ভুলে স্টাইল ওভাররাইড হয়ে যাওয়ার সম্ভাবনা থাকে।
উদাহরণস্বরূপ, নিচের উদাহরণে দুটি পদ্ধতিই ব্যবহৃত হয়েছে:
<!DOCTYPE html> <html> <head> <!-- এম্বেডেড (ইন্টারন্যাল) স্টাইল --> <style> h1 { color: red; } p { color: green; } </style> <!-- এক্সটার্নাল স্টাইলশীট ইম্পোর্ট --> <link href="/styles/main.css" rel="stylesheet" /> </head> <body> <h1>এটি একটি লাল হেডিং</h1> <p>এটি একটি সবুজ প্যারাগ্রাফ</p> </body> </html>তাই যদি এক্সটার্নাল স্টাইলশীটে h1 এবং p সিলেক্টরের জন্য কালার প্রপার্টি ভ্যালু ডিফাইন করা থাকে (যেমন blue), তবে উপরের মার্কআপে <link> এলিমেন্ট <style> এলিমেন্টের পরে रहने के कारण red এবং green ওভাররাইড হয়ে যাবে।
এটা খুব সহজে গুলিয়ে ফেলা যায়, তাই আমার পরামর্শ হলো সাধারণত <link> এলিমেন্ট ব্যবহার করে স্টাইল ইম্পোর্ট করুন — এবং <style> এলিমেন্ট শুধু খুব নির্দিষ্ট কেসের জন্য রাখুন।
