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

আউট লাইন এবং আউট লাইন স্টাইল

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

বিভিন্ন ধরণের আউট লাইন তৈরির ক্ষেত্রে বেশ কিছু বিষয়ের উপর কাজ করতে হয়। এগুলো হচ্ছে,

আউট লাইন স্টাইল (Outline Style)
আউট লাইন ওয়াইডথ (Outline Width)
আউট লাইন কালার (Outline Color)

আউট লাইন স্ট্যাইল

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

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

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

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