যা জানবো...
বর্তমান সময়ে ওয়েব পেজের কাঠামো তৈরি করা হয় HTML দিয়ে, ডিজাইন তৈরি করা হয় CSS দিয়ে, আর টেক্সট জমা রাখা হয় ডাটাবেজে। তাই কোন পেজকে আকর্ষণীয় করে তোলার পাশাপাশি ব্যবহার বান্ধব করে তোলার জন্য CSS এর ভূমিকা খুবই গুরুত্বপূর্ণ। এখান থেকে আমরা HTML এর সাথে CSS যুক্ত করার পদ্ধতি সম্পর্কে বিস্তারিত জানতে পারব।
সি এস এস
বর্তমান সময়ে ওয়েব পেজের কাঠামো তৈরি করা হয় 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>
<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>
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>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
0 comments: