Awesome! টিউনস
সকল Awesome! টিউনস

সিএসএস শিখুন ক্যারিয়ার গড়ুন [পর্ব-০৩] :: সিএসএস বর্ডার

1,483 দেখা 0 টিউমেন্টস জোসস
টিউন বিভাগ সিএসএস
প্রকাশিত
Level 2

13 টিউনস 9 টিউমেন্টস 1 ফলোয়ার

সিএসএস শিখুন ক্যারিয়ার গড়ুন

হ্যালো বন্ধুরা আজ আমরা নতুন আরেকটি বিষয় সম্পর্কে জানব আর তা হলো কীভাবে আপনি সিএসএস এর বর্ডার নির্ধারণ করবেন। আশা করি আমরা সকলে খুব সহজে বিষয়টা শিখতে পারব। তো চলুন শুরু করা যাক আজকের আমাদের আলোচনা।

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>

<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>

তো আমরা উপরে একটা কোড দেখতে পাচ্ছি যেখানে অনেকগুলো কোডিং করে দেখানো হয়েছে। এবার কোডগুলো কী তা জানা যাক। প্রথমে ডকটাইপ ট্যাগ এর ব্যবহার করা হয়েছে। আমরা জানি এটা কি জন্যে ব্যবহার করা হয়। এরপর ব্যবহার করা হয়েছে বর্ডার স্টাইল ট্যাগ গুলো। বর্ডার স্টাইল ট্যাগ এর প্রথমটা ছিল ডটেট ট্যাগ এর কাজ হলো পুরো বর্ডার ডট ডট দিয়ে পূর্ণ করা। এরপর ব্যবহার করা হয়েছে ড্যাসড ট্যাগ। এর কাজ হলো পুরো বর্ডার ড্যাস ড্যাস দ্বারা পূর্ণ করা।

এরপর পর্যায়ক্রমে ব্যবহার করা হয়েছে সলিড, ডাবল, গ্রোভ, রিজ, ইনসেট, আউটসেট, নান, হিডেন, ডটেট ড্যাসড সলিড ডাবল ট্যাগ। এই ট্যাগ গুলো ব্যবহার করার মাধ্যমে আপনার পেজ আরো সুন্দর করতে পারবেন।

এবার দেখুন আপনি কীভাবে আপনার বর্ডার কালার করবেন।

<!DOCTYPE html>
<html>
<head>
<style>
p.one {border-style: solid; border-color: red;}

p.two {border-style: solid; border-color: green;} 

p.three {border-style: solid; border-color: red green blue yellow;} 
</style>
</head>
<body>

<h2>The border-color Property</h2>
<p>This property specifies the color of the four borders:</p>

<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p class="three">A solid multicolor border</p>

</body>
</html>

এবার আমি আপনাদের দেখাবো আপনি কিভাবে আপনার করা বর্ডার গুলো কালার করবেন। প্রথমে কোডিং করে নিন এরপর আপনার যে ট্যাগ ব্যবহার করা লাগবে তা কোডিং এ দিয়ে দিয়েছি। তারপর আপনার বর্ডার স্টাইল ঠিক করে নিন। ঠিক করা হয়ে গেলে এরপর আপনি বর্ডার কালার ট্যাগ ব্যবহার করে সেখানে আপনার কালার এর কোড লিখে দিন। ব্যাস হয়ে গেল আপনার বর্ডার কালার করা। বিশ্বাস না হলে আপনার কোড রান করে দেখে নিন। কি মিলে গেল তো। তো তাহলে আপনি নিশ্চয়ই এখন বুঝতে পারছেন কীভাবে বর্ডার এর কাজ করতে হয় এবং বর্ডার এর কালার ঠিক ভাবে করতে হয়। আর কানো কিছু জানার থাকলে বলতে পারেন আমি জানানোর চেষ্টা করব।

Level 2

আমি মাহাদী হাসান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 4 বছর 10 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 13 টি টিউন ও 9 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 1 টিউনারকে ফলো করি।

নতুন কিছু শিখতে ভীষণ আগ্রহী

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস