CSS কালারঃ
আমরা কালার সম্পর্কে আগেই কিছৃুটা জেনেছি। এখানে বেশি ব্যবহার হয় হেক্স কালার
কোড আর আমরা সরাসরি কালার কোড লিখেও আমরা কালার চেন্জ করতে পারবো। তবে এখন
পর্যন্ত 140 টা কালার কোড সাপোর্ট করে। এছাড়াও আমরা RGB Color ইউজ করতে পারি।
প্রতিটি RGB কালারের সর্বচ্চো মান 255 এভাবে কম বেশি করে আমরা কালার সেট করতে
পারি।
এই কোড জানতে গুলো জানতে নিচের ফাইলটি নামিয়ে দেখতে পারেন।
Flat Color Website
<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 সাইটের সম্পদ
তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট
কপিরাইটের অধিনে চলে যেতে পারে।