X

X

X

HTML স্টাইল ( Style)


HTML style এর সূচনা

<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:36px;">I am big</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML Style Attribute (ইনলাইন CSS)

style attribute দিয়ে মূলত একটি element এর inline CSS লিখা হয়। এটি দ্বারা CSS ব্যবহার করে একটি element এর ডিফল্ট বৈশিষ্ট পরিবর্তন করা যায়। অর্থাৎ, element কে দৃষ্টিনন্দন করতে style attribute ব্যবহার করা হয়।

HTML style attribute -কে নিম্নোক্তভাবে লিখা হয়:

<tagname style="property:value;">

property হচ্ছে একটি CSS property এবং value হচ্ছে CSS value।

CSS সম্পর্কে বিস্তারিত আমাদের CSS টিউটোরিয়াল জানতে পারবেন। এবার আসুন CSS সম্পর্কে বিস্তারিত শেখার আগে কিছু CSS -এর ব্যবহার শিখে নিই।


HTML Element এর Background Color

কোনো Element-এর Background Color বর্ণনা করার জন্য CSS এর background-color property ব্যবহার করা হয়। হেক্সাডেসিমেল color code, Color নাম ইত্যাদি ব্যবহার করে value সেট করা যায়।
নিচের উদাহরণে একটি ওয়েব পেজের Background Color সেট করা হয়েছে। এখানে Color হিসেবে powerderblue ব্যবহার করা হয়েছে। উদাহরণটি লক্ষ্য করুন:

HTML body এর style

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

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

</body>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML এ Text Color

color property এর মাধ্যমে কোনো HTML Element এর রং নির্ধারণ করা হয়।

HTML এ Text Color

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML ফন্ট (Font)

font-family property এর মাধ্যমে কোনো HTML Element এর ফন্ট সেট করা হয়।

HTML fonts

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML এ Text এর আকার (Size)

font-size property এর মাধ্যমে কোনো HTML Element এর ফন্ট সাইজ নির্ধারণ করা হয়।

HTML fonts

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML এ Text Alignment

text-align property এর মাধ্যমে কোনো HTML Element এর টেক্স এলাইনমেন্ট অর্থাৎ, কন্টেন্ট বাম নাকি ডান দিক থেকে শুরু হবে তা নির্ধারণ করে দেওয়া হয়।

HTML fonts

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


চ্যাপ্টার সারাংশ

  • HTML element কে দৃষ্টিনন্দন করার জন্য style attribute ব্যবহার করুন।
  • Background color নির্ধারণ করার জন্যbackground-color property ব্যবহার করুন। 
  • টেক্সটের রং নির্ধারণ করার জন্য color attribute ব্যবহার করুন।
  • ফন্ট ফ্যামিলি নির্ধারণ করার জন্য font-family attribute ব্যবহার করুন।
  • ফন্ট সাইজ নির্ধারণ করার জন্য font-size attribute ব্যবহার করুন।
  • টেক্সট এলাইনমেন্ট নির্ধারণ করার জন্য text-align attribute ব্যবহার করুন।