ওয়েব স্কুল বিডি : সুপ্রিয় শিক্ষার্থী বন্ধুরা, শুভেচ্ছা নিয়ো। আমরা গত পর্বে div এর ব্যবহার নিয়ে আলোচনা করেছিলাম।
আজ তোমাদের HTML এ সিএসএস এর ব্যবহার নিয়ে আলোচনা করা হলো :
HTML এ সিএসএস এর ব্যবহার:
বর্তমান সময়ে ওয়েব পেজের কাঠামো তৈরি করা হয় HTML দিয়ে, ডিজাইন তৈরি করা হয় CSS দিয়ে, আর টেক্সট জমা রাখা হয় ডাটাবেজে। তাই কোন পেজকে আকর্ষণীয় করে তোলার পাশাপাশি ব্যবহার বান্ধব করে তোলার জন্য CSS এর ভূমিকা খুবই গুরুত্বপূর্ণ। HTML দ্বারা তৈরি পেজে তিন পদ্ধতিতে CSS যুক্ত করা যায়।
১. এক্সটার্নাল স্টাইল সিট (External Style Sheet )
২. ইনটার্নাল স্টাইল সিট (Internal Style Sheet)
৩. ইনলাইন স্টাইল সিট (Inline Style Sheet)
এক্সটার্নাল স্টাইল সিট:
এ পদ্ধতিতে HTML ফাইল এবং CSS স্টাইল সিট দুটি আলাদা সিটে রাখা হয়। এবং নিম্নোক্ত পদ্ধতিতে HTML এর <head></head>ট্যাগের মধ্যে লিংক তৈরি করে দেয়া হয়।
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
ইনটার্নাল স্টাইল সিট:
এ পদ্ধতিতে HTML এবং CSS স্টাইল একই সিটে <head></head> ট্যাগের মধ্যে রাখা হয়। এজন্য নিম্নোক্ত পদ্ধতিতে <style></style> ট্যাগ ব্যবহার করা হয়।
এ পদ্ধতিতে HTML এর প্রতিটি ট্যাগের মধ্যেই CSS স্টাইল যুক্ত করা হয় । এজন্য নিম্নোক্ত পদ্ধতিতে style এট্রিবিউটস ব্যবহার করা হয়।
<p style="margin-left:120px; font-weight: bold; color: #060;">
HTML এ সিএসএস এর ব্যবহার:
বর্তমান সময়ে ওয়েব পেজের কাঠামো তৈরি করা হয় HTML দিয়ে, ডিজাইন তৈরি করা হয় CSS দিয়ে, আর টেক্সট জমা রাখা হয় ডাটাবেজে। তাই কোন পেজকে আকর্ষণীয় করে তোলার পাশাপাশি ব্যবহার বান্ধব করে তোলার জন্য CSS এর ভূমিকা খুবই গুরুত্বপূর্ণ। HTML দ্বারা তৈরি পেজে তিন পদ্ধতিতে CSS যুক্ত করা যায়।
১. এক্সটার্নাল স্টাইল সিট (External Style Sheet )
২. ইনটার্নাল স্টাইল সিট (Internal Style Sheet)
৩. ইনলাইন স্টাইল সিট (Inline Style Sheet)
এক্সটার্নাল স্টাইল সিট:
এ পদ্ধতিতে HTML ফাইল এবং CSS স্টাইল সিট দুটি আলাদা সিটে রাখা হয়। এবং নিম্নোক্ত পদ্ধতিতে HTML এর <head></head>ট্যাগের মধ্যে লিংক তৈরি করে দেয়া হয়।
<head>
<link rel="stylesheet" type="text/css" href="css/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.webschoolbd.com</title>
<head>
<title> www.webschoolbd.com</title>
<link rel="stylesheet" type="text/css" href="css/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>
</html>
Tags
HTML