এইচটিএমএল স্টাইল এট্রিবিউট (HTML Style Attribute)
style এট্রিবিউট
এইচটিএমএল এলিমেন্টকে তিনভাবে স্টাইল করা যায়। যথাঃ
- ইনলাইন(inline) স্টাইল
- ইন্টারনাল(internal) স্টাইল
- এক্সটার্নাল(external) স্টাইল
ইনলাইন(inline) স্টাইল করার জন্য এইচটিএমএল style এট্রিবিউট ব্যবহার করা হয়। style এট্রিবিউটেও সিএসএসের সকল প্রোপার্টি ব্যবহার করা যায়।
সিন্টেক্স
<tagname style="css-property: css-value;">content</tagname>
style এট্রিবিউট ব্যবহার করে টেক্সটের কালার সেট
color প্রোপার্টির মাধ্যমে একটি এইচটিএমএল এলিমেন্টের টেক্সটকে কালার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল style এট্রিবিউট</title>
</head>
<body>
<p style="color: teal;">style এট্রিবিউট এর মাধ্যমে এই প্যারাগ্রাফ এর কালার টিল করা হয়েছে।</p>
</body>
</html>
ফলাফল
style এট্রিবিউট ব্যবহার করে ব্যাকগ্রাউন্ড কালার সেট
background-color প্রোপার্টির মাধ্যমে একটি এইচটিএমএল এলিমেন্টের ব্যাকগ্রাউন্ড কালার সেট করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল style এট্রিবিউট</title>
</head>
<body style="background-color: teal;">
<p>এটি একটি প্যারাগ্রাফ।</p>
</body>
</html>
ফলাফল
style এট্রিবিউট ব্যবহার করে ফন্ট নির্ধারণ
font-family প্রোপার্টির মাধ্যমে এইচটিএমএল এলিমেন্টের ফন্ট নির্ধারণ করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল style এট্রিবিউট</title>
</head>
<body>
<p style="font-family: courier;">This is a paragraph.</p>
<p style="font-family: helvetica neue, Helvetica;">This is a paragraph.</p>
</body>
</html>
ফলাফল
style এট্রিবিউট ব্যবহার করে টেক্সট সাইজ সেট
font-size প্রোপার্টির মাধ্যমে একটি এইচটিএমএল এলিমেন্টের টেক্সটের আকার নির্ধারণ করা করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল style এট্রিবিউট</title>
</head>
<body>
<p style="font-size:24px">এটি একটি প্যারাগ্রাফ।</p>
<p style="font-size:10px;">এটি একটি প্যারাগ্রাফ।</p>
</body>
</html>
ফলাফল
style এট্রিবিউট ব্যবহার করে টেক্সট এলাইনমেন্ট(alignment) সেট
text-align প্রোপার্টির মাধমে এইচটিএমএল এলিমেন্টের কন্টেন্টের অবস্থান নির্ধারণ করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল style এট্রিবিউট</title>
</head>
<body>
<p style="text-align: center;">এই প্যারাগ্রাফটি মাঝে থাকবে।</p>
<p style="text-align: right;">এই প্যারাগ্রাফটি ডানে থাকবে।</p>
</body>
</html>
ফলাফল
অধ্যায়ের সারাংশ
- এইচটিএমএল এলিমেন্টকে ইনলাইন স্টাইল করার জন্য
styleএট্রিবিউট ব্যবহার করা হয়। - টেক্সটের কালার সেট করার জন্য
colorপ্রোপার্টি ব্যবহার করা হয়। - ব্যাকগ্রাউন্ড কালার সেট করার জন্য
background-colorপ্রোপার্টি ব্যবহার করা হয়। - টেক্সটের ফন্ট নির্ধারণের করার জন্য
font-familyপ্রোপার্টি ব্যবহার করা হয়। - টেক্সটের সাইজ নির্ধারণ করার জন্য
font-sizeপ্রোপার্টি ব্যবহার করা হয়। - কন্টেন্টের অবস্থান নির্ধারণ করার জন্য
text-alignব্যবহার করা হয়।