এক নজরে এইচটিএমএল স্টাইল ট্যাগসমূহ
এইচটিএমএলকে স্টাইল করা
এইচটিএমএল এলিমেন্টকে ৩ ভাবে স্টাইল করা হয়ঃ
- ইনলাইন -
styleএট্রিবিউট ব্যবহার করে ইনলাইন স্টাইল করা হয়। - ইন্টার্নাল - এইচটিএমএল
< head >এলিমেন্টে< style >এলিমেন্ট ব্যবহার করে ইন্টার্নাল স্টাইল করা হয়। - এক্সটার্নাল - এক্সটার্নাল সিএসএস ফাইল ব্যবহার করে স্টাইল করা হয়।
এইচটিএমএল এলিমেন্টে সিএসএস ব্যবহার করার সবচেয়ে সহজ এবং উত্তম পদ্ধতি হলো এক্সটার্নাল(external) সিএসএস ফাইল ব্যবহার করা।
কিন্তু আমাদের এই টিউটোরিয়ালের মধ্যে বেশীরভাগ ক্ষেত্রেই আমরা ইনলাইন এবং ইন্টার্নাল স্টাইল ব্যবহার করেছি। কারণ এগুলো আপনাকে আমাদের উদাহরণগুলো অনুশীলন করেতে এবং বুঝতে সহায়তা করবে।
 | সিএসএস সম্পর্কে আরও জানতে আমাদের সিএসএস টিউটোরিয়াল ভিজিট করুন। |
|---|
ইনলাইন স্টাইল
একটি নির্দিষ্ট এইচটিএমএল এলিমেন্টকে স্টাইল করার জন্য ইনলাইন স্টাইল ব্যবহার করা হয়।
কোন একটি এলিমেন্টকে ইনলাইন স্টাইল করার জন্য style এট্রিবিউট ব্যবহার করা হয়।
নিচের উদাহরণটি রান করলে < p > এলিমেন্টের টেক্সটের কালার নীল দেখতে পাবেনঃ
kt_satt_skill_example_id=1437
ইন্টার্নাল স্টাইল
ইন্টার্নাল স্টাইল করার জন্য ডকুমেন্টের < head > সেকশনের মধ্যে < style > ট্যাগ ব্যবহার করা হয় এবং স্টাইল কোডগুলো এই < style > ট্যাগের মধ্যে লিখতে হয়।
kt_satt_skill_example_id=1438
এক্সটার্নাল স্টাইল
এক সাথে অনেকগুলো পেজ অর্থাৎ সম্পূর্ণ ওয়েবসাইটকে স্টাইল করার জন্য এক্সটার্নাল সিএসএস ব্যবহার করা হয়।
একটি এক্সটারনাল সিএসএস ফাইল তৈরি করে তার মধ্যে প্রয়োজনীয় স্টাইল কোড অন্তর্ভুক্ত করা হয়। তারপর ফাইলটিকে ডকুমেন্টের < head > এলিমেন্টের মধ্যে < link > ট্যাগের মাধ্যমে লিংক করে দেওয়া হয়। এতে করে খুব সহজেই একই স্টাইল শীট ওয়েবসাইটের সবকটি পেজে অন্তর্ভুক্ত করে সমগ্র ওয়েবসাইটের স্টাইল করা যায়।
kt_satt_skill_example_id=1439
একটি এক্সটার্নাল স্টাইল শীট(CSS) যেকোনো টেক্সট এডিটরে লেখা যেতে পারে। কোড লেখা শেষে .css এক্সটেনশন দিয়ে ফাইলটি সংরক্ষণ(save) করুন।
নিম্নে "style.css" ফাইলের কোড তুলে ধরা হলোঃ
kt_satt_skill_example_id=1441
সিএসএস ফন্ট স্টাইল
এইচটিএমএল এলিমেন্টে কি ধরণের ফন্ট ব্যবহার করা হবে তা সিএসএস font-family প্রোপার্টির মাধ্যমে নির্ধারণ করা হয়।
এইচটিএমএল এলিমেন্টের ফন্ট সাইজ নির্ধারণ করার জন্য সিএসএস font-size প্রোপার্টি ব্যবহার করা হয়।
kt_satt_skill_example_id=1442
এইচটিএমএল id এবং class সিলেক্টর
একটি মাত্র এলিমেন্টকে স্টাইল করার জন্য সিএসএস id সিলেক্টর ব্যবহার করা হয়। এইচটিএমএল এলিমেন্টের আইডি সর্বদাই ইউনিক হতে হয়।
পক্ষান্তরে একাধিক বা সমজাতীয় এলিমেন্টকে স্টাইল করার জন্য সিএসএস class সিলেক্টর ব্যবহার করা হয়।
id এট্রিবিউটকে সিলেক্ট করে স্টাইল নির্ধারণ
কোনো নির্দিষ্ট এলিমেন্টকে বিশেষভাবে স্টাইল করার জন্য এলিমিন্টের মধ্যে id এট্রিবিউট যুক্ত করা হয়।
kt_satt_skill_example_id=1443
তারপরে ঐ id এট্রিবিউট যুক্ত এলিমেন্টকে স্টাইল করার জন্য id কে কল/সিলেক্ট করে স্টাইল নির্ধারণ করা হয়।
kt_satt_skill_example_id=1445
class এট্রিবিউটকে সিলেক্ট করে স্টাইল নির্ধারণ
অনেকগুলো এলিমেন্টকে একত্রে একই ধরনের স্টাইল করার জন্য class এট্রিবিউট যুক্ত করা হয়।
kt_satt_skill_example_id=1447
তারপরে ঐ class এট্রিবিউট যুক্ত এলিমেন্টগুলোকে স্টাইল করার জন্য class কে কল/সিলেক্ট করে স্টাইল নির্ধারণ করা হয়।
kt_satt_skill_example_id=1448
অধ্যায়ের সারাংশ
- ইনলাইন স্টাইল করার জন্য এইচটিএমএল
styleএট্রিবিউট ব্যবহার করা হয়। - ইন্টার্নাল স্টাইল করার জন্য
< style >ট্যাগ ব্যবহার করা হয়। - এক্সটারনাল সিএসএস ফাইলকে এইচটিএমএলে অন্তর্ভুক্ত করার জন্য
< link >ট্যাগ ব্যবহার করা হয়। < style >এবং< link >ট্যাগ< head >সেকশনের মধ্যে লিখতে হয়।- টেক্সটের কালার পরিবর্তনের জন্য সিএসএস
colorপ্রোপার্টি ব্যবহার করা হয়। - টেক্সটের ফন্ট পরিবর্তনের জন্য সিএসএস
font-familyপ্রোপার্টি ব্যবহার করা হয়। - টেক্সটের আকার পরিবর্তনের জন্য সিএসএস
font-sizeপ্রোপার্টি ব্যবহার করা হয়।
Read more
