ওয়েব ডিজাইন (পর্ব ১২) CSS কালার, ব্যাকগ্রাউন্ড, বর্ডার, মার্জিং, প্যাডিং, আউটলাইন

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

CSS কালারঃ

আমরা কালার সম্পর্কে আগেই কিছৃুটা জেনেছি। এখানে বেশি ব্যবহার হয় হেক্স কালার কোড আর আমরা সরাসরি কালার কোড লিখেও আমরা কালার চেন্জ করতে পারবো। তবে এখন পর্যন্ত 140 টা কালার কোড সাপোর্ট করে। এছাড়াও আমরা RGB Color ইউজ করতে পারি। প্রতিটি RGB কালারের সর্বচ্চো মান 255 এভাবে কম বেশি করে আমরা কালার সেট করতে পারি।
এই কালার নেম ও কোড জানতে গুলো জানতে নিচের ফাইলটি নামিয়ে দেখতে পারেন।

➡️Color Name & Code Download

<style>
#p1 {background-color: red;}   /* red */
#p2 {background-color: rgb(0, 255, 0);}   /* green */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* blue with opacity */
</style>

<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>

CSS ব্যাকগ্রাউন্ডঃ

আমরা CSS Background ব্যবহার করে আমাদের ব্যকগ্রাউন্ডে কালার ও ইমেজকে সুন্দর ভাবে সাজাতে পারবো।
 

CSS  Background Color

এই CSS এর মাধ্যমে আপনি ব্যকগ্রাউন্ডে কালার করতে পারবেন।

 body {
  background-color: lightblue;
    opacity: 0.3;
}

CSS Background image

এই Background ইমেজ এর মাধ্যমে আপনারা আপনার সাইটে ব্যকগ্রাউন্ডে ইমেজ দিতে পারবেন।
body {
  background-image: url("image.jpg");
    background-repeat: no-repeat;
}
 

CSS বর্ডারঃ

এই বর্ডার দ্বারা আপনি আপনার কন্টেন্ট কে বর্ডার দিতে পারবেন আপনার ইচ্ছা মতো।
<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 মার্জিনঃ

এই সিএসএস মার্জিনের মাধ্যমে আপনি আপনার কন্টেন্ট কে মার্জিন দিতে পারবেন।
<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 এর মাধ্যমে আপনারা আপনার কন্টেন্টকে প্যাডিং দিতে পারবেন।

<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 এ আউট লাইন করতে নিচের কোড ট্রাই করুন।
<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 সাইটের সম্পদ তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট কপিরাইটের অধিনে চলে যেতে পারে।






Samrat Raihan

I am a web designer and developer. I regularly work for different companies. I try to write a little on this blog when I have time. If you can learn something from this blog, then I will be successful.