ওয়েব ডিজাইন (পর্ব ০৬) বর্ডার,বর্ডার রেডিয়াস,বাটন ডিজাইন,মার্জিন,প্যাডিং,আউটলাইন

আস্‌সালামু আলাইকুম! আশা করি আল্লাহ এর অশেষ রহমতে আপনারা সবাই ভালো আছেন।আমিও আপনাদের দোয়াই ভালো আছি। আজকের নতুন টপিকে আপনাকে স্বাগতম! আজকে আপনাদের দেখাবো, বর্ডার,বর্ডার রেডিয়াস,বাটন ডিজাইন,মার্জিন,প্যাডিং,আউটলাইন।

CSS বর্ডারঃ(CSS Border)

এই বর্ডার দ্বারা আপনি আপনার কন্টেন্ট কে বর্ডার দিতে পারবেন আপনার ইচ্ছা মতো।

<style>
p.one {
  border-style: solid;
  border-color: red;
    border-radius: 5px;

}

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

p.three {
  border-style: dotted;
  border-color: blue;
} 
</style>
<p class="one">Lorem Ipsum is simply dummy text </p>
<p class="two">Lorem Ipsum is simply dummy text </p>
<p class="three">Lorem Ipsum is simply dummy text </p>

CSS মার্জিনঃ (CSS Margin)

এই সিএসএস মার্জিনের মাধ্যমে আপনি আপনার কন্টেন্ট কে মার্জিন দিতে পারবেন।

<style>
div {
  border: 1px solid black;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
  background-color: lightblue;
}
</style>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>

CSS প্যাডিংঃ (CSS Padding)

এই CSS এর মাধ্যমে আপনারা আপনার কন্টেন্টকে প্যাডিং দিতে পারবেন।

<style>
div {
  border: 1px solid black;
  background-color: lightblue;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
</style>
<div>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum</div>

CSS আউট লাইনঃ(CSS Outline)

css এ আউট লাইন করতে নিচের কোড ট্রাই করুন।

<style>
p {
  border: 2px solid black;
  outline: #4CAF50 solid 10px;
  margin: auto;  
  padding: 20px;
  text-align: center;
}
</style>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</p>

এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি বুঝতে অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই আর্টিকেলটি WikiJana.Com সাইটের সম্পদ তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট কপিরাইটের অধিনে চলে যেতে পারে।