HTML Style Attribute in Easy Bengali 2024

একটি ওয়েবপেজকে Style করার জন্য CSS (Cascading Style Sheets) ব্যবহৃত হয়। HTML এ, কোনো নির্দিষ্ট Element-কে ইনলিনে স্টাইল প্রয়োগ করতে আমরা style Attribute ব্যবহার করি। style Attribute এর মাধ্যমে আমরা বিভিন্ন CSS property (যেমন: color , background-color , border ইত্যাদি) সরাসরি HTML ট্যাগের ভিতরে ব্যবহার করতে পারি।

এই ব্লগে আমরা HTML Style Attribute নিয়ে বিস্তারিত আলোচনা করব এবং কিছু গুরুত্বপূর্ণ CSS property যেমন color, background-color, এবং border এর উদাহরণ দেখাবো।

What is Attributes in HTML ?

Attributes হলো HTML ট্যাগের একটি গুরুত্বপূর্ণ অংশ যা একটি নির্দিষ্ট ট্যাগ সম্পর্কে অতিরিক্ত তথ্য প্রদান করে। প্রতিটি HTML ট্যাগের সাথে এক বা একাধিক Attributes থাকতে পারে, যা সেই ট্যাগটি কিভাবে কাজ করবে তা নির্ধারণ করে। Attributes সবসময় ট্যাগের opening অংশে লেখা হয় এবং এর value সাধারণত ডাবল কোটেশন চিহ্নের মধ্যে লেখা হয়।

Html Attributes সম্পর্কে বিস্তারিত পড়ুন – Click here

HTML এর style Attribute কী ?

style Attribute এর সাহায্যে HTML এলিমেন্টের মধ্যে সরাসরি inline CSS যুক্ত করা যায় । এটি একটি inline styling পদ্ধতি, যেখানে একটি HTML এলিমেন্টের ভিতরে CSS ব্যবহার করা হয়। style Attribute এ আমরা এক বা একাধিক CSS property ব্যবহার করতে পারি।

style Attribute এর গঠন

<tagname style="property:value;" >

Example

<p style="color: blue;"> This is a paragraph. </p>

Output

This is a paragraph.

এখানে style=”color: blue;” দ্বারা প্যারাগ্রাফের টেক্সট এর color চেঞ্জ করে নীল রঙ করা হয়েছে।

3 important CSS properties

color

color প্রপার্টি ব্যবহার করে HTML এলিমেন্টের টেক্সটের color পরিবর্তন করা যায়। এটি একটি CSS property , যা বিভিন্ন রঙের নাম, হেক্সাডেসিমেল বা RGB মানের মাধ্যমে color নির্ধারণ করতে ব্যবহৃত হয়।

Example

<p style="color: red;">এই প্যারাগ্রাফের টেক্সট লাল রঙের  দেখাবে।</p>

এই প্যারাগ্রাফের টেক্সট লাল রঙের দেখাবে।

এখানে color: red; property এর মাধ্যমে টেক্সটের রঙ লাল করা হয়েছে।

background-color

background-color property ব্যবহার করে HTML এলিমেন্টের Background color পরিবর্তন করা যায়। এটি এলিমেন্টের Background অংশের color পরিবর্তন করতে ব্যবহৃত হয়।

Example

<p style="background-color: yellow;" >এই প্যারাগ্রাফের Background color হলুদ। </p>

এই প্যারাগ্রাফের Background color হলুদ।

এখানে background-color: yellow; property এর মাধ্যমে টেক্সটের Background color হলুদ করা হয়েছে।

border

border প্রপার্টি ব্যবহার করে HTML এলিমেন্টের চারপাশে একটি বর্ডার দেওয়া যায়। বর্ডার তিনটি অংশ নিয়ে গঠিত: বর্ডারের width, types , এবং color।

Border Width

কত পিক্সেলের বর্ডার সেটা দিতে হবে।

Syntax

[Number]px

উদাহরণস্বরূপ

2px

Border Types

কি রকম টাইপের Border?

Syntax

[solid / dashed / dotted / double ]

উদাহরণস্বরূপ

solid

Border Color

যেকোনো color দিতে পারি।

Syntax

[ color_hexcode / color_name / rgb_color ]

উদাহরণস্বরূপ

red

Total Syntax

2px solid red

Example

<p style="border: 2px solid red;" > border 2px solid red </p>

border 2px solid red

এখানে border: 2px solid red; property এর মাধ্যমে টেক্সটের Border color লাল করা হয়েছে।

Style Attribute এর মাধ্যমে একাধিক CSS property add করা

আমরা একাধিক CSS property একসাথে style Attribute এর মাধ্যমে add করতে পারি। প্রতিটি property সেমিকোলন (;) দিয়ে আলাদা করা হয়।

Example

<p style="color: white; background-color: black; border: 1px dashed yellow;">
    এই প্যারাগ্রাফের টেক্সট সাদা, ব্যাকগ্রাউন্ড কালো এবং বর্ডার হলুদ রঙের dashed।
</p>

এই প্যারাগ্রাফের টেক্সট সাদা, ব্যাকগ্রাউন্ড কালো এবং বর্ডার লাল রঙের dashed।

এখানে, color: white;, background-color: black;, এবং border: 1px dashed yellow; একসাথে প্রয়োগ করা হয়েছে। ফলে প্যারাগ্রাফের টেক্সট সাদা, ব্যাকগ্রাউন্ড কালো, এবং ড্যাশড (dashed) লাল রঙের বর্ডার রয়েছে।

Style Attribute ব্যবহার করার পদ্ধতি

1. style Attribute একটি এলিমেন্টে দ্রুত স্টাইল করতে ব্যবহার করা হয়। যেমন বাটন বা প্যারাগ্রাফের রঙ পরিবর্তন করা।
2. একাধিক CSS প্রপার্টি একসাথে ব্যবহার করা যায়, যেমন টেক্সটের রঙ, বর্ডার এবং ব্যাকগ্রাউন্ড একই সাথে পরিবর্তন করা।
3. বড় ওয়েবসাইটে inline স্টাইলের পরিবর্তে external CSS বা internal CSS ব্যবহার করা উচিত, কারণ এতে কোড মেইনটেইন করা সহজ হয়ে যায়।

আরো জানতে নিচের ভিডিওটা দেখে আসুন। 👇👇

উপসংহার

HTML এর style Attribute ওয়েবপেজের নির্দিষ্ট এলিমেন্টে ইনলাইন স্টাইল করার একটি সহজ পদ্ধতি। এর মাধ্যমে আমরা color, background-color, এবং border সহ অন্যান্য CSS প্রপার্টি সরাসরি HTML কোডের মধ্যে ব্যবহার করতে পারি। যদিও এটি দ্রুত স্টাইলিংয়ের জন্য কার্যকর, তবে বড় প্রজেক্টের ক্ষেত্রে external CSS বা internal CSS ব্যবহার করাই ভালো।

সঠিকভাবে style Attribute ব্যবহার করলে ওয়েবপেজের ডিজাইন আরও আকর্ষণীয় এবং user-friendly হয়।

F.A.Q