CSS এর Elements সমুহকে আমি কয়েকটি ভাগে ভাগ করে নিয়েছি সুবিধার জন্য।
- Main Css
- Css for Fonts
- Other Elements
.rakhib{background: #ddd;
color: #5D6D7E;
border: 2px solid #eee;
margin: 6px 6px 6px 6px;
padding: 6px 6px 6px 6px;
}
Eelemets ব্যাখ্যা
background: #ddd;
এটা দিয়ে ব্যাক-গ্রাউন্ড কালার কে বুঝানো হয়। #ddd হল
color-code, এখানে আপনার ইচ্ছামত কালার কোড নিতে পারবেন।
যেমন__
background: #4f5d7c;
background: red;
background: black;
border: 2px solid #eee;
এটা দিয়ে Boder কে ডিটেক্ট করা হয়। অর্থাৎ, #eee কালারের 2px মোটা চারদিকে বর্ডার হবে।
margin: 6px 6px 6px 6px;
margin সম্পর্কে আগে লিখেছি। এটা border এর বাহিরের অংশ। 6px হল তার আকার, কতটুকু মোটা হবে, left, top, bottom, right.
px যত বাড়ানো হবে বাহিরে তত বেশি জায়গা দখল করবে।
padding: 6px 6px 6px 6px;
padding সম্পর্কে আগে লিখেছি। এটা border এর ভেতরের অংশ। 6px হল তার আকার, কতটুকু মোটা হবে, left, top, bottom, right.
px যত বাড়ানো হবে ভেতরে তত বেশি জায়গা দখল করবে।
[note: আমরা কালার কোড & px পরিবর্তন করে নিজে নিজে Run করাতে চেষ্টা করি।]
.rakhib{background: #ddd;
border:2px solid #eee;
margin: 6px 6px 6px 6px;
padding: 6px 6px 6px 6px;
color: #5D6D7E;
font-family:serif,cursive;
font-size: 14px;
font-weight:normal;
text-align:center;
line-height: 1.0em;
}
Eelemets ব্যাখ্যা
color: #5D6D7E;
এটা দিয়ে ওই class এর font color কেমন হবে তা বুঝায়।
ইচ্ছা মত কালার দিতে পারবেন।
font-family: serif, cursive;
font-family হল লেখা গুলো কোন ফন্টে show হবে তা বলে দেয়। নানা রকম ফন্ট নেম আছে। যা আপনি ব্যবহার করতে পারেন।
font-size: 14px;
এটা দিয়ে ফন্টের আকার বুঝায়, বড় হবে নাকি ছোট হবে।
font-weight: normal;
এটা দিয়ে ফন্ট সমুহ কেমন হবে তা বুঝায়, নরমাল হবে নাকি মোটা হবে, নাকি ইতালিক, (normal/bold/italic)
text-align:center;
লেখা গুলো class এর কোথায় প্রদর্শিত হবে তার কাজ করে। (left/right/center) ইচ্ছা মতো দেয়া যাবে।
line-height:1.0em;
line-height দিয়ে দুইটা লাইন পরস্পর কর দুরে হবে তা বলে দেয়।
.rakhib{background: #ddd;
color: #5D6D7E;
margin: 6px 6px 6px 6px;
padding: 6px 6px 6px 6px;
font-family:serif,cursive;
font-size: 14px;
font-weight:normal;
text-align:center;
line-height:1.0em;
text-decoration:none;
display:block;
list-style:none;
opacity:0;
translation: 1s;
position:absulote;
over-flow-wrap: break-word;
}
আমার কাজ মোটামুটি শেষ। এখন আপনার কাজ, মানে ইলিমেন্ট px পরিবর্তন করবেন এবং HTML run করবেন বার বার।
কালার পরিবর্তন করবেন & run করাবেন। যতক্ষন না ওইটা মাথায় ডুকছে, খুজে বের করুন, ওই ইলিমেন্ট টা HTML এর কোথায় কেমন করে কাজ করে। তাহলেই আপনার আয়ত্বে চলে আসবে।
এভাবে ভিন্ন ভিন্ন Css class বানান,
যেমন,
.rakib{
}
.rakib2{
}
.rakib3{
}
.rakib4{
}
দেখবেন যেন সব গুলো মিল না থাকে। একটার 6px হলে আরেকটাই 8px/9px, একটা center হলে আরেকটা left ব্যবহার করুন। কমেন্ট করে জানাবেন, কে কত সুন্দর এবং কত ভাল CSS class বানিয়েছেন। একটা কথা মনে রাখবেন, যত Edit & run করাবেন, তত বেশি তাড়া-তাড়ি শিখতে পারবেন।
যদি আমার দ্বারা একটু কাজ হয়ে থাকে, তাহলে আমার কষ্ট & লিখা সার্থক হবে। আসছি আবারও নতুন কোন টপিক নিয়ে। সে পর্যন্ত ভালই থাকুন।
ধন্যবাাদ সবাইকে।