বর্তমান সময়ে ওয়েব পেজের কাঠামো তৈরি করা হয় HTML দিয়ে,
ডিজাইন তৈরি করা হয় CSS দিয়ে, আর টেক্সট জমা রাখা হয় ডাটাবেজে। তাই কোন
পেজকে আকর্ষণীয় করে তোলার পাশাপাশি ব্যবহার বান্ধব করে তোলার জন্য CSS এর
ভূমিকা খুবই গুরুত্বপূর্ণ। HTML দ্বারা তৈরি পেজে তিন পদ্ধতিতে CSS যুক্ত
করা যায়।
১. এক্সটার্নাল স্টাইল সিট (External Style Sheet )
২. ইনটার্নাল স্টাইল সিট (Internal Style Sheet)
৩. ইনলাইন স্টাইল সিট (Inline Style Sheet)
২. ইনটার্নাল স্টাইল সিট (Internal Style Sheet)
৩. ইনলাইন স্টাইল সিট (Inline Style Sheet)
এক্সটার্নাল স্টাইল সিট
এ পদ্ধতিতে HTML ফাইল এবং CSS স্টাইল সিট দুটি আলাদা সিটে রাখা হয়। এবং নিম্নোক্ত পদ্ধতিতে HTML এর <head></head>ট্যাগের মধ্যে লিংক তৈরি করে দেয়া হয়।<head>
<link rel="stylesheet" type="text/css" href="http://tutohost.com/bangla/style.css">
</head>
ইনটার্নাল স্টাইল সিট
এ পদ্ধতিতে HTML এবং CSS স্টাইল একই সিটে <head></head> ট্যাগের মধ্যে রাখা হয়। এজন্য নিম্নোক্ত পদ্ধতিতে <style></style> ট্যাগ ব্যবহার করা হয়।
<head>
<style type="text/css">
body {background-color: red;}
p { margin-left: 20px;
font-weight: bold;
color: #006; }
</style>
</head>
<style type="text/css">
body {background-color: red;}
p { margin-left: 20px;
font-weight: bold;
color: #006; }
</style>
</head>
ইনলাইন স্টাইল সিট
এ পদ্ধতিতে HTML এর প্রতিটি ট্যাগের মধ্যেই CSS স্টাইল যুক্ত করা হয় । এজন্য নিম্নোক্ত পদ্ধতিতে style এট্রিবিউটস ব্যবহার করা হয়।<p style="margin-left:120px; font-weight: bold; color: #060;">
উদাহরণ প্রোগ্রাম
<html>
<head>
<title> www.tutohost.com</title>
<head>
<title> www.tutohost.com</title>
<link rel="stylesheet" type="text/css" href="http://tutohost.com/bangla/style.css">
<style>
body{background:green; font-family:Verdana; font-size:15px;}
h3{font-size:25px; font-family:Tahoma; color:red;}
</style>
</head>
<style>
body{background:green; font-family:Verdana; font-size:15px;}
h3{font-size:25px; font-family:Tahoma; color:red;}
</style>
</head>
<body >
This is a paragraph.
<br />
<h3>
Bangladesh is a beautiful country.
</h3>
<p style="color: #600">
This is a paragraph. This is a paragraph.<br />
This is a paragraph. This is a paragraph.<br />
This is a paragraph. This is a paragraph.<br />
This is a paragraph. This is a paragraph.<br />
This is a paragraph. This is a paragraph.<br />
</p>
<br />
<h3>
Bangladesh is a beautiful country.
</h3>
<p style="color: #600">
This is a paragraph. This is a paragraph.<br />
This is a paragraph. This is a paragraph.<br />
This is a paragraph. This is a paragraph.<br />
This is a paragraph. This is a paragraph.<br />
This is a paragraph. This is a paragraph.<br />
</p>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file
মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as
type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox
দিয়ে open করলে ছবির মত দেখাবে। </html>
0 comments:
Post a Comment