এইচটিএমএল স্টাইলের বৈশিষ্ট্যটি কোনও উপাদান, যেমন রঙ, ফন্ট, আকার এবং আরও কিছুতে স্টাইল যুক্ত করতে ব্যবহৃত হয়।
এইচটিএমএল স্টাইল অ্যাট্রিবিউট
এইচটিএমএল উপাদানটির স্টাইল সেট করা, style অ্যাট্রিবিউট দিয়ে HTML কে সাজিয়ে নেয়া যেতে পারে।
এইচটিএমএল স্টাইল অ্যাট্রিবিউটে নিম্নলিখিত সিনট্যাক্স রয়েছে:
<tagname style="property:value;">
এখানে property টা একটা CSS property এবং value টা একটা CSS value.
CSS টিউটোরিয়ার এ বিষয় এ আরো বিস্তারিত জানতে পারবেন ।
পেছনের রঙ বা ব্যাকগ্রাউন্ড কালার
CSS background-color property টি এলিমেন্ট এর পেছনের রং বা ব্যাকগ্রাউন্ড কালার পরিবর্তন করে
একটি ডকুমেন্ট এর পেছনের রং হলুদ করি
<body style ="background-color:yellow"> <h2> ব্যাকগ্রাউন্ড কালার পরিবর্তন করেছি </h2> </body>
দুটি পৃথক উপাদানের জন্য ব্যাকগ্রাউন্ড রঙ সেট করুন
<body>
<h1 style="background-color:orange;">কমলা রং এর হেডিং</h1>
<p style="background-color:tomato;"> টমেটো রং এর প্যারাগ্রাফ </p>
</body>
Text Color লেখার রঙ
সিএসএস color property এইচটিএমএল উপাদানগুলির জন্য লেখার রঙকে সংজ্ঞায়িত করে:
<h1 style="color:green;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p>
Fonts
সিএসএস font-family প্রপার্টি এইচটিএমএল এলিমেন্ট এর জন্য লেখার ফন্ট সংজ্ঞায়িত করে:
<h1 style="font-family:arial;">This is a heading</h1> <h2 style="font-family:courier;">This is anogher heading </h2>
Text Size লেখার আকার
সিএসএস font-size প্রপার্টি এইচটিএমএল এলিমেন্ট এর জন্য Text Size বা লেখার আকার সংজ্ঞায়িত করে:
<p style="font-size:30px;">This is a paragraph.</p> <p style="font-size:60px;">This is a paragraph.</p>
Text Alignment
সিএসএস text-align প্রপার্টি এইচটিএমএল এলিমেন্ট এর জন্য Text Alignmnt সংজ্ঞায়িত করে:
<p>আমার অ্যালাইনমেন্ট সংজ্ঞায়িত হয়নি</p> <p style="text-align:center;">আমার অ্যালাইনমেন্ট সেন্টার</p> <p style="text-align:right;">আমার অ্যালাইনমেন্ট ডান দিকে</p>
অধ্যায় সারাংশ
- HTML এলিমেন্ট সাজানোর জন্য style অ্যাট্রিবিউট এর ব্যবহার
- ব্যাকগ্রাউন্ড কালার বদলের জন্য background-color এর ব্যবহার
- লেখার রং বদল এর জন্য color এর ব্যবহার
- লেখার ফন্ট বদলের জন্য font-family এর ব্যবহার
- লেখার সাইজ বদলের জন্য font-size এর ব্যবহার
- লেখার এলাইনমেন্ট বদলের জন্য text-aligh এর ব্যবহার