এইচটিএমএল <style> ট্যাগ
<style> ট্যাগের ব্রাউজার সাপোর্ট
| এলিমেন্ট | Google Chrome | Edge/IE | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
<style> |
সকল ভার্সন | সকল ভার্সন | সকল ভার্সন | সকল ভার্সন | সকল ভার্সন |
সংজ্ঞা ও ব্যবহার
এইচটিএমএল ডকুমেন্টের জন্য স্টাইল শীট ডিক্লেয়ার করার জন্য <head> সেকশনে <style> এলিমেন্টটি ব্যবহার করা হয়।
ব্রাউজার কিভাবে একটি এইচটিএমএল ডকুমেন্টকে প্রদর্শন করবে তা <style> ট্যাগের মধ্যে নির্ধারণ করে দেওয়া হয়।
কিভাবে <style> এলিমেন্ট ব্যবহার করে একটি এইচটিএমএল ডকুমেন্টের স্টাইল নির্ধারণ করা যায়, তা নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>HTML style tag</title>
<style>
h1 {
background: green;
color: white;
}
p {
background: teal;
color: white;
}
</style>
</head>
<body>
<h1>This is a heading with white font color and green background.</h1>
<p>This is a paragraph with white font color and teal background.</p>
</body>
</html>
ফলাফল
টীকা ও মন্তব্যঃ
- এক্সটার্নাল স্টাইল শীটের সাথে লিংক করার জন্য
<link>ট্যাগটি ব্যবহার করুন। - স্টাইল সম্পর্কে আরো অধিক জানতে আমাদের সিএসএস টিউটোরিয়ালটি পড়ুন।
<style>ট্যাগটি অবশ্যই<head>সেকশনের মধ্যে রাখতে হবে।
এট্রিবিউট
নিচের টেবিলে <style> ট্যাগের এট্রিবিউট, এট্রিবিউটের ভ্যালু এবং তাদের ব্যবহার তুলে ধরা হলোঃ
| এট্রিবিউট | ভ্যালু | বর্ননা |
|---|---|---|
| media | screen tty tv projection handheld braille aural all |
ডকুমেন্টটি কোন ডিভাইসে প্রদর্শিত হবে সেটি নির্ধারণ করে। |
| scoped | scoped | স্টাইল শুধুমাত্র প্যারেন্ট এলিমেন্ট এবং তার চাইল্ড এলিমেন্ট প্রয়োগ করা যায় তা উল্লেখ করে। |
| type | text/css | <style> ট্যাগের মিডিয়া টাইপ উল্লেখ করে। |
<style> ট্যাগে গ্লোবাল এবং ইভেন্ট এট্রিবিউট সাপোর্ট করে কিনা?
| গ্লোবাল এট্রিবিউট | ইভেন্ট এট্রিবিউট |
|---|---|
| সাপোর্ট করে | সাপোর্ট করে |
<style> ট্যাগের ডিফল্ট স্টাইল
অধিকাংশ ব্রাউজারেই <style> এলিমেন্ট নিম্নলিখিত স্টাইল ভ্যালুগুলো সহকারে প্রদর্শিত হয়ঃ
style {
display: none;
}