HTML CSS/স্টাইল ট্যাগের ব্যবহার
শুক্রবার, ১৯ জুলাই, ২০১৯
Comment

Style, HTML এর একটি নতুন এট্রিবিউটস, এর মাধ্যমে HTML এর মধ্যেই CSS ব্যবহারের সুযোগ সৃষ্টি হয়। Style তথা CSS ব্যবহারের মাধ্যমে ওয়েব পেজের বিভিন্ন উপাদানের ডিজাইন তৈরি করা হয়। অন্যান্য এট্রিবিউটস যেমন align="center", align="left", bgcolor="green", height="100px", width="50px, bgcolor="green" ইত্যাদির মাধ্যমে যদিও ডিজাইন তৈরি করা যায়, তবে এক্ষেত্রে Style ব্যবহারে বিশেষ সুবিধা পাওয়া যায়।
এক নজরে এইচটিএমএল স্টাইল ট্যাগসমূহ
ট্যাগবিবরণ
<style>এইচটিএমএল ডকুমেন্টে ইন্টার্নাল স্টাইল করার জন্য সিএসএস কোডসমূহ
<style>ট্যাগের মধ্যে লেখা হয়।
<link>এইচটিএমএল ডকুমেন্টে এক্সটার্নাল সিএসএস ফাইল সংযুক্ত করার জন্য
<link> ট্যাগ ব্যবহার করা হয়।
এইচটিএমএলকে স্টাইল করা
এইচটিএমএল এলিমেন্টকে ৩ ভাবে স্টাইল করা হয়ঃ
ইনলাইন - style এট্রিবিউট ব্যবহার করে ইনলাইন স্টাইল করা হয়।
ইন্টার্নাল - এইচটিএমএল <head> এলিমেন্টে <style> এলিমেন্ট ব্যবহার করে ইন্টার্নাল স্টাইল করা হয়।
এক্সটার্নাল - এক্সটার্নাল সিএসএস ফাইল ব্যবহার করে স্টাইল করা হয়।
ইনলাইন স্টাইল
একটি নির্দিষ্ট এইচটিএমএল এলিমেন্টকে স্টাইল করার জন্য ইনলাইন স্টাইল ব্যবহার করা হয়।
কোন একটি এলিমেন্টকে ইনলাইন স্টাইল করার জন্য style এট্রিবিউট ব্যবহার করা হয়।
নিচের উদাহরণটি রান করলে <p> এলিমেন্টের টেক্সটের কালার নীল দেখতে পাবেনঃ
উদাহরণ প্রোগ্রাম:
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল ইনলাইন স্টাইল</title>
</head>
<body>
<p style="color:blue;">স্যাট একাডেমী</p>
</body>
</html>
ইন্টার্নাল স্টাইল
ইন্টার্নাল স্টাইল করার জন্য ডকুমেন্টের <head> সেকশনের মধ্যে <style> ট্যাগ ব্যবহার করা হয় এবং স্টাইল কোডগুলো এই <style> ট্যাগের মধ্যে লিখতে হয়।
উদাহরণ প্রোগ্রাম:
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল ইন্টার্নাল স্টাইল</title>
<style>
body{background-color: teal;}
p{color: white;}
span{color: powderblue;}
</style>
</head>
<body>
<p>এটি একটি <span>প্যারাগ্রাফ</span></p>
</body>
</html>
এক্সটার্নাল স্টাইল
এক সাথে অনেকগুলো পেজ অর্থাৎ সম্পূর্ণ ওয়েবসাইটকে স্টাইল করার জন্য এক্সটার্নাল সিএসএস ব্যবহার করা হয়।
একটি এক্সটারনাল সিএসএস ফাইল তৈরি করে তার মধ্যে প্রয়োজনীয় স্টাইল কোড অন্তর্ভুক্ত করা হয়। তারপর ফাইলটিকে ডকুমেন্টের <head> এলিমেন্টের মধ্যে <link> ট্যাগের মাধ্যমে লিংক করে দেওয়া হয়। এতে করে খুব সহজেই একই স্টাইল শীট ওয়েবসাইটের সবকটি পেজে অন্তর্ভুক্ত করে সমগ্র ওয়েবসাইটের স্টাইল করা যায়।
উদাহরণ প্রোগ্রাম:
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল এক্সট্রার্নাল স্টাইল</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<p>এটি একটি <span>প্যারাগ্রাফ</span></p>
</body>
</html>
বি:দ্র: Output দেখার জন্যে একটা নোটপ্যাড open করে উপরের উদাহরনের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি যে কোন Browser দিয়ে open করুন।
☞ এই পোষ্ট সম্পর্কে যদি আপনার কোন প্রশ্ন☞জিজ্ঞাসা☞সমস্যা☞তথ্য জানার থাকে তাহলে আপনি☞কমেন্ট করলে আপনাকে আমরা প্রয়োজনীয় তথ্য দিয়ে সাহায্য করার চেষ্টা করব☞☞☞ "HTML CSS/স্টাইল ট্যাগের ব্যবহার"
একটি মন্তব্য পোস্ট করুন