এইচটিএমএল সিএসএস (HTML CSS)
এক নজরে এইচটিএমএল স্টাইল ট্যাগসমূহ
| ট্যাগ | বিবরণ |
|---|---|
| <style> | এইচটিএমএল ডকুমেন্টে ইন্টার্নাল স্টাইল করার জন্য সিএসএস কোডসমূহ <style>ট্যাগের মধ্যে লেখা হয়। |
| <link> | এইচটিএমএল ডকুমেন্টে এক্সটার্নাল সিএসএস ফাইল সংযুক্ত করার জন্য <link> ট্যাগ ব্যবহার করা হয়। |
এইচটিএমএলকে স্টাইল করা
এইচটিএমএল এলিমেন্টকে ৩ ভাবে স্টাইল করা হয়ঃ
- ইনলাইন -
styleএট্রিবিউট ব্যবহার করে ইনলাইন স্টাইল করা হয়। - ইন্টার্নাল - এইচটিএমএল
<head>এলিমেন্টে<style>এলিমেন্ট ব্যবহার করে ইন্টার্নাল স্টাইল করা হয়। - এক্সটার্নাল - এক্সটার্নাল সিএসএস ফাইল ব্যবহার করে স্টাইল করা হয়।
এইচটিএমএল এলিমেন্টে সিএসএস ব্যবহার করার সবচেয়ে সহজ এবং উত্তম পদ্ধতি হলো এক্সটার্নাল(external) সিএসএস ফাইল ব্যবহার করা।
কিন্তু আমাদের এই টিউটোরিয়ালের মধ্যে বেশীরভাগ ক্ষেত্রেই আমরা ইনলাইন এবং ইন্টার্নাল স্টাইল ব্যবহার করেছি। কারণ এগুলো আপনাকে আমাদের উদাহরণগুলো অনুশীলন করেতে এবং বুঝতে সহায়তা করবে।
 |
সিএসএস সম্পর্কে আরও জানতে আমাদের সিএসএস টিউটোরিয়াল ভিজিট করুন। |
|---|
ইনলাইন স্টাইল
একটি নির্দিষ্ট এইচটিএমএল এলিমেন্টকে স্টাইল করার জন্য ইনলাইন স্টাইল ব্যবহার করা হয়।
কোন একটি এলিমেন্টকে ইনলাইন স্টাইল করার জন্য 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>
ফলাফল
একটি এক্সটার্নাল স্টাইল শীট(CSS) যেকোনো টেক্সট এডিটরে লেখা যেতে পারে। কোড লেখা শেষে .css এক্সটেনশন দিয়ে ফাইলটি সংরক্ষণ(save) করুন।
নিম্নে "style.css" ফাইলের কোড তুলে ধরা হলোঃ
body{
background-color: teal;
}
p{
color: white;
}
span{
color: powderblue;
}
সিএসএস ফন্ট স্টাইল
এইচটিএমএল এলিমেন্টে কি ধরণের ফন্ট ব্যবহার করা হবে তা সিএসএস font-family প্রোপার্টির মাধ্যমে নির্ধারণ করা হয়।
এইচটিএমএল এলিমেন্টের ফন্ট সাইজ নির্ধারণ করার জন্য সিএসএস font-size প্রোপার্টি ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল ফন্ট স্টাইল</title>
<style>
p {
color: blue;
font-family: verdana;
font-size: 130%;
}
span {
color: red;
font-family: courier;
font-size: 200%;
}
</style>
</head>
<body>
<p>This is a <span>paragraph</span>.</p>
</body>
</html>
ফলাফল
এইচটিএমএল id এবং class সিলেক্টর
একটি মাত্র এলিমেন্টকে স্টাইল করার জন্য সিএসএস id সিলেক্টর ব্যবহার করা হয়। এইচটিএমএল এলিমেন্টের আইডি সর্বদাই ইউনিক হতে হয়।
পক্ষান্তরে একাধিক বা সমজাতীয় এলিমেন্টকে স্টাইল করার জন্য সিএসএস class সিলেক্টর ব্যবহার করা হয়।
id এট্রিবিউটকে সিলেক্ট করে স্টাইল নির্ধারণ
কোনো নির্দিষ্ট এলিমেন্টকে বিশেষভাবে স্টাইল করার জন্য এলিমিন্টের মধ্যে id এট্রিবিউট যুক্ত করা হয়।
<p id="myIntro">আমি শাইকাতুল জান্নাত(স্মরণীকা)।</p>
তারপরে ঐ id এট্রিবিউট যুক্ত এলিমেন্টকে স্টাইল করার জন্য id কে কল/সিলেক্ট করে স্টাইল নির্ধারণ করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল id সিলেক্টর</title>
<style>
#myIntro {
color: blue;
}
</style>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p id="myIntro">আমি শাইকাতুল জান্নাত(স্মরণীকা)।</p>
</body>
</html>
ফলাফল
class এট্রিবিউটকে সিলেক্ট করে স্টাইল নির্ধারণ
অনেকগুলো এলিমেন্টকে একত্রে একই ধরনের স্টাইল করার জন্য class এট্রিবিউট যুক্ত করা হয়।
<p class="error">এটি কিছুটা ভিন্ন!!</p>
তারপরে ঐ class এট্রিবিউট যুক্ত এলিমেন্টগুলোকে স্টাইল করার জন্য class কে কল/সিলেক্ট করে স্টাইল নির্ধারণ করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল class এট্রিবিউট</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<p>এটি একটি অনুচ্ছেদ।</p>
<p class="error">এটি ভিন্ন একটি অনুচ্ছেদ।</p>
<p>এটি একটি অনুচ্ছেদ।</p>
<p class="error">এটি ভিন্ন একটি অনুচ্ছেদ।</p>
</body>
</html>
ফলাফল
অধ্যায়ের সারাংশ
- ইনলাইন স্টাইল করার জন্য এইচটিএমএল
styleএট্রিবিউট ব্যবহার করা হয়। - ইন্টার্নাল স্টাইল করার জন্য
<style>ট্যাগ ব্যবহার করা হয়। - এক্সটারনাল সিএসএস ফাইলকে এইচটিএমএলে অন্তর্ভুক্ত করার জন্য
<link>ট্যাগ ব্যবহার করা হয়। <style>এবং<link>ট্যাগ<head>সেকশনের মধ্যে লিখতে হয়।- টেক্সটের কালার পরিবর্তনের জন্য সিএসএস
colorপ্রোপার্টি ব্যবহার করা হয়। - টেক্সটের ফন্ট পরিবর্তনের জন্য সিএসএস
font-familyপ্রোপার্টি ব্যবহার করা হয়। - টেক্সটের আকার পরিবর্তনের জন্য সিএসএস
font-sizeপ্রোপার্টি ব্যবহার করা হয়।