বর্ডার এবং বর্ডার স্টাইল |সি এস এস বাংলা টিউটোরিয়াল

বর্ডার এবং বর্ডার স্টাইল

বর্ডার ওয়েব পেজের একটি গুরুত্বপূর্ণ উপাদান।এইচ টি এম এল এবং সি এস এস ব্যবহার করে টেমপ্লেট ডিজাইন করার সময় বিভিন্ন উপাদানের জন্য সঠিক রং এবং আকৃতির বর্ডার তৈরি করার উপর ডিজাইনের মাধুর্য অনেকাংশে নির্ভর করে।সি এস এস ব্যবহার করে বিভিন্ন ধরণের বর্ডার তৈরি করা যায়।
বিভিন্ন ধরণের বর্ডার তৈরির ক্ষেত্রে বেশ কিছু বিষয়ের উপর কাজ করতে হয়। এগুলো হচ্ছে,

বর্ডার স্টাইল (Border Style)
বর্ডার ওয়াইডথ (Border Width)
বর্ডার কালার (Border Color)
পৃথক বর্ডার ( Individual Border )

বর্ডার স্টাইল

বর্ডার স্ট্যাইল নির্দেশ করে বর্ডারটি দেখতে কেমন হবে।বর্ডার স্ট্যাইল তৈরির জন্য Declaration করতে হবে, border-style:dotted এর অনুরূপ। সি এস এস ব্যবহার করে বিভিন্ন ধরণের বর্ডার স্ট্যাইল তৈরি করা যায়। ডটেড স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:dotted ; ড্যাসেড স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:dashed; ডাবল স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:double; গ্রোভ স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:groove; রিডজ স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:ridge; ইনসেট স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:inset; আউটসেট স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:outset; ।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;}
#dotted{border-style:dotted ;}
#dashed{border-style:dashed;}
#double{border-style:double;}
#groove{border-style:groove;}
#ridge{border-style:ridge;}
#inset{border-style:inset;}
#outset{border-style:outset;}
</style>
</head>
<body >
<h3 id="dotted">This is an example of dotted border</h3>
<h3 id="dashed">This is an example of dashed border</h3>
<h3 id="double">This is an example of double border</h3>
<h3 id="groove">This is an example of groove border</h3>
<h3 id="ridge">This is an example of ridge border</h3>
<h3 id="inset">This is an example of inset border</h3>
<h3 id="outset">This is an example of outset border</h3>
</body>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।