ভূমিকা
একটি HTML ডকুমেন্ট শুধু কনটেন্ট দেখানোর জন্যই নয়—সেটিকে সুন্দর ও আকর্ষণীয় করার জন্য স্টাইলিং প্রয়োজন।
স্টাইলিংয়ের সবচেয়ে সাধারণ পদ্ধতি হলো HTML-এ সরাসরি style attribute ব্যবহার করা। এই পোস্টে আমরা — HTML style কী, কিভাবে ব্যবহার হয় এবং কিছু উদাহরণ — সহজ ভাষায় শিখবো।
HTML Style কী?
HTML style হলো CSS ব্যবহারের সহজতম রূপ, যেখানে HTML এলিমেন্টের মধ্যে style attribute ব্যবহার করে ডিজাইন পরিবর্তন করা যায়।
উদাহরণ:
এখানে:
- style attribute → ডিজাইন নির্দেশ দিচ্ছে
- color: red; → টেক্সটের রঙ পরিবর্তন করছে
Style কোথায় ব্যবহার করা হয়?
Style attribute যেকোনো HTML ট্যাগের ভিতরে ব্যবহার করা যায়:
✔ <h1>
✔ <p>
✔ <div>
✔ <span>
✔ <a>
✔ <img>
✔ <table> — প্রায় সব HTML এলিমেন্টেই
Style Attribute এর Structure
উদাহরণ:
HTML Style এর সাধারণ Property গুলো
১. Color
২. Font Size
৩. Text Alignment
৪. Background Color
৫. Margin এবং Padding
একাধিক Style Property একসাথে ব্যবহার
এখানে ৪টি ভিন্ন style property একই attribute এর ভেতরে লেখা হয়েছে।
Inline Style বনাম CSS — কোনটি ভালো?
| Inline Style | CSS (Best Practice) |
|---|---|
| শুধু ওই ট্যাগের ডিজাইন নিয়ন্ত্রণ করে | পুরো ওয়েবসাইটের ডিজাইন নিয়ন্ত্রণ করে |
| দ্রুত প্রয়োগ | প্রফেশনাল ও স্কেলেবল |
| মেইনটেইন করা কঠিন | সাজানো ও পুনর্ব্যবহারযোগ্য |
📌 Inline Style শুধু ছোট টেস্ট বা দ্রুত এডিটের জন্য ভালো। বড় প্রোজেক্টে External CSS ব্যবহার করা উচিত।
একটি পূর্ণ HTML Styling উদাহরণ
><h1 style=“color: navy;”>HTML Style Example</h1>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>HTML Style Example</title>
</head>
<body>
<p style=“color: gray; font-size: 18px;”>
এটি একটি inline style প্যারাগ্রাফ।
</p>
<a href=“https://rezablogbd.com”
style=“background: green; color: white; padding: 5px 10px;”>
Visit Reza Blog
</a>
</body>
</html>
Style Attribute ব্যবহারের সময় সতর্কতা
❌ সব element-এ inline style দিয়ে design control করতে যাবেন না
✔ শুধু দ্রুত টেস্ট বা ছোট পরিবর্তনের ক্ষেত্রে ব্যবহার করুন
✔ Full নিয়ন্ত্রণের জন্য external CSS শিখুন
উপসংহার
HTML style attribute ব্যবহার করে সহজে রঙ, আকার, ব্যাকগ্রাউন্ড, টেক্সট অ্যালাইনমেন্ট—সবকিছু পরিবর্তন করা যায়। যদিও CSS বেশি সংগঠিত ও শক্তিশালী, HTML style হলো CSS শেখার প্রথম ধাপ এবং ছোট কাজের জন্য উপযোগী।
