Share
Facebook
Twitter
LinkedIn
Whatsapp
Instagram
Messenger

এইচটিএমএল স্টাইল - HTML Style


এইচটিএমএল এলিমেনট গুলো স্টাইল করতে এইচটিএমএল এর style ট্যাগ ব্যবহার করা হয়।


style এট্রিবিউট

inline স্টাইল অর্থাৎ প্রতিটি এইচটিএমএল এলিমেনটের সাথে স্টাইল এট্রিবিউট ব্যবহার করে এইচটিএমএল কন্টেন্টগুলো কে style করা যায়। style এট্রিবিউটে প্রায় সিএসএসের সকল প্রোপার্টিই ব্যবহার করা যায়।

নিচে এর সিনট্যাক্স দেখুন। এখানে property হল সিএসএস প্রপার্টি এবং value হল সিএসএস মান।

সিনট্যাক্স

<tagname style="property:value;">
 

এইচটিএমএল <style> ট্যাগ সম্পর্কে জানতে W3C এর 4.3.2.6 The style element ওয়েব পেজটি ব্রাউজ করুন।


লেখার রঙ নির্ধারণ

style এট্রিবিউটে color প্রোপার্টি ব্যবহারের মাধ্যমে কোন এইচটিএমএল এলিমেন্টের লেখার রঙ নির্ধারণ করা যায়। নিচে একটি উদাহরণ দেখুন যেখানে style এট্রিবিউট এর মাধ্যমে লেখাগুলোর রঙ নির্ধারণ করা হয়েছে।

উদাহরণ


<h1 style="color: blue;">This is a heading with blue colour.</h1> 
<p style="color: red;">This is a paragraph with red colour.</p>

কোড এডিটর



লেখার ফন্ট নির্ধারণ

style এট্রিবিউটে font-family প্রোপার্টি বাবহারের মাধ্যমে এইচটিএমএল এলিমেন্ট যেমন কোন হেডিং বা কোন প্যারাগ্রাফের ফন্ট নির্ধারণ করা যায়। নিচে একটি উদাহরণ দেখুন।

উদাহরণ


<h1 style="font-family: verdana;">This is a heading with verdana font style.</h1> 
<p style="font-family: courier;">This is a paragraph with courier font style.</p>

কোড এডিটর



ব্যাকগ্রাউন্ডের রঙ নির্ধারণ

style এট্রিবিউটে background-color প্রোপার্টি ব্যবহারের মাধ্যমে কোন এইচটিএমএল এলিমেন্টের ব্যাকগ্রাউন্ডের রঙ নির্ধারণ করা যায়। নিচে একটি উদাহরণ দেখুন। এই উদাহরনটিতে ওয়েব পেজের ব্যাকগ্রাউন্ডের রঙ নির্ধারিত হবে aliceblue.

উদাহরণ


<body style="background-color: aliceblue;">

<h1>This is a heading.</h1>
<p>This is a paragraph.</p>

</body>

কোড এডিটর



লেখার অবস্থান নির্ধারণ

style এট্রিবিউটে text-align প্রোপার্টি ব্যবহার করে এইচটিএমএল এর কোন টেক্সট এলিমেন্ট কন্টেন্টের অবস্থান নির্ধারণ করা যায়। নিচে এর একটি উদাহরণ দেখুন।

উদাহরণ


<h1 style="text-align: center;">Heading in center.</h1> 
<p style="text-align: right;">Paragraph in Right.</p>

কোড এডিটর


text-align প্রপার্টি ব্যবহার না করলে এইচটিএমএল এর টেক্সট এলিমেনট গুলো পূর্ব-নির্ধারিত বা default ভাবেই ওয়েব পেজে বাঁ দিক থেকে প্রদর্শিত হয়।


লেখার আকার পরিবর্তন

style এট্রিবিউটে font-size প্রোপার্টি বাবহার করে কোন এইচটিএমএল টেক্সট এলিমেন্টের আকার নির্ধারণ করা করা যায়। নিচে এর একটি উদাহরণ দেখুন।

উদাহরণ


<h1 style="font-size: 150%;">This is a heading</h1> 
<p style="font-size: 20px;">This is a paragraph.</p>

কোড এডিটর



ডেপ্রিকেটেড ট্যাগ এবং এট্রিবিউট

এইচটিএমএল ৪.০১ এ কতগুলো ট্যাগ এবং এট্রিবিউট ডেপ্রিকেট বা বাতিল করা হয়েছে। ডেপ্রিকেট বলতে বোঝায় যে এইচটিএমএলের পরবর্তী ভার্সনগুলোয় এই ট্যাগ এবং এট্রিবিউট ব্যবহার করা হবে না।
যে সকল ট্যাগ এবং এট্রিবিউট ডেপ্রিকেট বা বাতিল করা হয়েছে সেগুলো হল -

ট্যাগ বর্ণনা
<center> Deprecated.কোন কন্টেন্টের অবস্থান মাঝখানে নির্ধারণ করে।
<font> এবং <basefont> Deprecated.এইচটিএমএল এ টেক্সট এর font নির্ধারণ করে।
<s> এবং <strike> Deprecated. টেক্সটের জন্য strikethrough স্টাইল নির্ধারণ করে।
<u> Deprecated.টেক্সটের জন্য underline স্টাইল নির্ধারণ করে।


এট্রিবিউট বর্ণনা
align Deprecated.টেক্সটের অবস্থান বা alignment নির্ধারণ করে।
bgcolor Deprecated.এই এট্রিবিউটের দ্বারা background এর রং নির্ধারণ করা হয়।
color Deprecated.লেখা বা টেক্সটের রং নির্ধারণ করে।

নোট - এই সকল ট্যাগ এবং এট্রিবিউটগুলো ব্যবহার করা উচিৎ নয়, এর পরিবর্তে সিএসএস ব্যবহার করা ভাল।