Brand Multimedia : CSS Tutorial

Showing posts with label CSS Tutorial. Show all posts

সিএসএস প্রদর্শন টিউটোরিয়াল (CSS Display Tutorial in Bangla)

<div dir="ltr" style="text-align: left;" trbidi="on">
display প্রোপার্টিজ দিয়ে ব্লক লেভেল এলিমেন্টকে ইনলাইন আবার ইনলাইন 
এলিমেন্ট কে ব্লক লেভেল বানানো যায়। এছাড়া এই প্রোপার্টিজ দিয়ে এলিমেন্ট 
অদৃশ্য করে রাখা যায়। মুলত এর ৩/৪ টি মান খুব ব্যবহার হয় বাকি মানগুলি 
দিয়েও অনেক কাজ হয় তবে কম ব্যবহৃত হয়ে থাকে।<br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_402361">
<div class="lines">
<div class="line alt1">
<code class="number">1.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">.navigation a {</code></span></span></div>
<div class="line alt2">
<code class="number">2.</code><span class="content"><span class="block" style="margin-left: 27px !important;"><code class="keyword">display</code><code class="plain">: </code><code class="value">block</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">3.</code><span class="content"><span class="block" style="margin-left: 27px !important;"><code class="keyword">margin-left</code><code class="plain">: </code><code class="value">0.5em</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">4.</code><span class="content"><span class="block" style="margin-left: 27px !important;"><code class="keyword">padding</code><code class="plain">: </code><code class="value">5px</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">5.</code><span class="content"><span class="block" style="margin-left: 27px !important;"><code class="keyword">border</code><code class="plain">: </code><code class="value">1px</code> <code class="value">solid</code> <code class="value">#000</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">6.</code><span class="content"><span class="block" style="margin-left: 27px !important;"><code class="keyword">color</code><code class="plain">: </code><code class="value">#000</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">7.</code><span class="content"><span class="block" style="margin-left: 27px !important;"><code class="keyword">text-decoration</code><code class="plain">: </code><code class="value">none</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">8.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="plain">}</code></span></span></div>
</div>
</div>
</div>
<a class="online_editor" href="http://www.webcoachbd.com/webcoachbdEditor/onlineEditor.php?scd=display-inline" target="_blank">প্রদর্শন</a><br />
display:inline;
 দিয়ে দেখুন (এটাই বা্ ডিফল্ট থাকে) সব a বা এনকর ট্যাগ একলাইনে দেখাবে। 
এনকর হচ্ছে (<a></a> ) ইনলাইন এলিমেন্ট। display:block; দেয়াতে
 ব্লক লেভেল এলিমেন্টের মত কাজ করেছে। এরুপ <span>, <em> 
ইত্যাদি ইনলাইন এলিমেন্ট বা যেকোন ইনলাইন এলিমেন্টে কে প্রয়োজনে ব্লক লেভেল
 করা যায় এই প্রোপার্টিজ দিয়ে।<br />
<br />
আবার <p>, 
<li> ইত্যাদি ব্লক লেভেল এলিমেন্ট যেগুলি ব্রাউজারের সম্পূর্ন width 
নিয়ে থাকে এবং আগে পিছে লাইন ব্রেক দেয়া থাকে এসবকে ইনলাইন এর মত কাজ করাতে
 display:inline; করে দিতে হয়। যেমন<br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_770098">
<div class="lines">
<div class="line alt1">
<code class="number">1.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p{</code></span></span></div>
<div class="line alt2">
<code class="number">2.</code><span class="content"><span class="block" style="margin-left: 18px !important;"><code class="keyword">display</code><code class="plain">:</code><code class="value">inline</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">3.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
</div>
</div>
</div>
<a class="online_editor" href="http://www.webcoachbd.com/webcoachbdEditor/onlineEditor.php?scd=display-block" target="_blank">প্রদর্শন</a><br />
<br />
দেখুন
 p কিভাবে ইনলাইন এলিমেন্টের মত কাজ করছে। display এর আরেকটা মান আছে যথা 
"none", এটা দিলে ঐ এলিমেন্টকে লুকিয়ে ফেলবে এবং কোন স্পেসও ধরে রাখবেনা। 
জেকোয়েরি দিয়ে কাজ ফর্ম ভেলিডেশন ইত্যাদি কাজে এভাবে এলিমেন্ট অদৃশ্য করে 
রাখার প্রয়োজন হয়।<br />
উপরের উদাহরনে display:inline; এর জায়গায় display:none; দিয়ে দেখুন অার কিছু দেখাবেনা।<br />
<br />
inline-block
 (display:inline-block) একটা মান আছে এটা দিলে ইনলাইনের মতই কাজ করবে শুধু
 পার্থক্য হচ্ছে height এবং width এখন এলিমেন্ট টির জন্য কাজ করবে। 
সাধারনভাবে ইনলাইন এলিমেন্টের height, width কাজ করেনা। <br />
<br />
display:table; দিলে এলিমেন্টটি টেবিলের (<table></table>) মত আচরন করবে।<br />
display:table-cell; দিলে এলিমেন্ট টি <td></td> এর মত কাজ করবে।<br />
table-row দিলে <tr></tr> মত কাজ হবে।<br />
এরুপ আরো আছে, প্রয়োগ করে দেখতে পারেন।<br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_420514">
<div class="lines">
<div class="line alt1">
<code class="number">01.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">display</code><code class="plain">:</code><code class="value">inline-table</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">02.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">display</code><code class="plain">:</code><code class="value">list-item</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">03.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">display</code><code class="plain">:</code><code class="value">table-caption</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">04.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">display</code><code class="plain">:</code><code class="value">table-column-group</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">05.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">display</code><code class="plain">:</code><code class="value">table-header-group</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">06.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">display</code><code class="plain">:</code><code class="value">table-footer-group</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">07.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">display</code><code class="plain">:</code><code class="value">table-row-group</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">08.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">display</code><code class="plain">:</code><code class="value">table-column</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">09.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">display</code><code class="plain">:</code><code class="value">run-in</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">10.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">display</code><code class="plain">:flex;</code></span></span></div>
</div>
</div>
</div>
</div>
<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim0Rac0KuCaztb1WRDSsuPEaNb5Ws8nKCEcgv7zlGWOfnmIWkiBeWlTpRDgWHw9oM9Jv38ttho0uRCEXDvoJ9CmHl0UNAag8H94WRG1d-tx94N5tM3jsyqbsvwwSSpRtL8x_vIoE3RuUM/s1600/u-Q1mBzvxrZjPk_yL2c7yryTqMvVIIoevZTiMq946n9dpKvM96pBg35fvjKbSjE5sduRd_VDx6zowrPc3g%25253Dw256-h256-nc.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim0Rac0KuCaztb1WRDSsuPEaNb5Ws8nKCEcgv7zlGWOfnmIWkiBeWlTpRDgWHw9oM9Jv38ttho0uRCEXDvoJ9CmHl0UNAag8H94WRG1d-tx94N5tM3jsyqbsvwwSSpRtL8x_vIoE3RuUM/s640/u-Q1mBzvxrZjPk_yL2c7yryTqMvVIIoevZTiMq946n9dpKvM96pBg35fvjKbSjE5sduRd_VDx6zowrPc3g%25253Dw256-h256-nc.png"> </a> </div>

সিএসএস প্রদর্শন টিউটোরিয়াল (CSS Display Tutorial in Bangla)

display প্রোপার্টিজ দিয়ে ব্লক লেভেল এলিমেন্টকে ইনলাইন আবার ইনলাইন এলিমেন্ট কে ব্লক লেভেল বানানো যায়। এছাড়া এই প্রোপার্টিজ দিয়ে এলিমেন্ট অ...

8:47 PM

সিএসএস ফ্লট টিউটোরিয়াল (CSS Float Tutorial in Bangla )

<div dir="ltr" style="text-align: left;" trbidi="on">
লেআউট
 তৈরীর সময় সিএসএস ফ্লট দিয়ে সবচেয়ে গুরত্বপূর্ন কাজটি করা হয়। এছাড়া লেখা 
আর ছবি একসাথে থাকলে সেখানে ফ্লট ব্যবহার করা হয়। float এর মুলত দুটি মান 
দেয়া যায় left এবং right. left দিলে এলিমেন্ট টিকে ঠেলে বামে নিয়ে আসবে আর 
right দিলে ডানে নিয়ে যাবে। যেমন একটা ইমেজ বা ছবি যদি লেখার বামে নিতে চাই
 যেমন পত্র পত্রিকায় লেখার সাথে ছবি থাকে তাহলে<br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_619482">
<div class="lines">
<div class="line alt1">
<code class="number">1.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">img {</code></span></span></div>
<div class="line alt2">
<code class="number">2.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">float</code><code class="plain">: </code><code class="value">left</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">3.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
</div>
</div>
</div>
<a class="online_editor" href="http://www.webcoachbd.com/webcoachbdEditor/onlineEditor.php?scd=image-float" target="_blank">প্রয়োগ দেখুন</a><br />
float:right দিন ছবিটি ডানে চলে যাবে।<br />
<br />
** float দিয়ে এলিমেন্ট গুলিকে পাশাপাশি (আড়াআড়িভাবে) বা side-by-side বসানো যায়। float সবসময় আড়াআড়িভাবে কাজ করে। <br />
<br />
সাধারনত
 এইচটিএমএল এ এলিমেন্টগুলি লম্বালম্বি ভাবে একটার পর একটা অবস্থান করে যেমন
 অনেকগুলি li, p বা div ইত্যাদি। এখন এগুলিকে পাশাপাশি আনতে অর্থ্যাৎ একটার
 ডানে আরেকটা এভাবে ব্রাউজারের শেষ পর্যন্ত আনতে float:left; দিলে কাজ 
করবে।<br />
<br />
** যেকোন ব্লক লেভেল এলিমেন্ট ব্রাউজারের বা থেকে 
ডানে শেষ পর্যন্ত জায়গা দখল করে থাকে ফলে ব্লক লেভেল এলিমেন্টের পাশে অন্য 
আরেকটা ব্লক লেভেল এলিমেন্ট ঢোকেনা। তবে যখন float দিবেন তখন এলিমেন্টের 
কনটেন্ট পরিমান জায়গা নিয়ে বাকি জায়গা সে অন্য floated এলিমেন্টের জন্য 
ছেড়ে দিবে।<br />
<br />
লেআউট তৈরীর সময় কোন ডিভের পাশে কোন ডিভ হবে এসব ফ্লট দিয়ে ঠিক করা হয়। যেমন<br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_980750">
<div class="lines">
<div class="line alt1">
<code class="number">01.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">.header{</code></span></span></div>
<div class="line alt2">
<code class="number">02.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">float</code><code class="plain">:</code><code class="value">left</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">03.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="plain">width : </code><code class="value">100%</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">04.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">border</code><code class="plain">: </code><code class="value">1px</code> <code class="value">solid</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">05.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">height</code><code class="plain">: </code><code class="value">100px</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">06.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt1">
<code class="number">07.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">.left_menu{</code></span></span></div>
<div class="line alt2">
<code class="number">08.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="plain">width : </code><code class="value">24.999%</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">09.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">float</code><code class="plain">:</code><code class="value">left</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">10.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">border</code><code class="plain">: </code><code class="value">1px</code> <code class="value">solid</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">11.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">height</code><code class="plain">: </code><code class="value">250px</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">12.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">clear</code><code class="plain">: </code><code class="value">both</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">13.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt2">
<code class="number">14.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">.content{</code></span></span></div>
<div class="line alt1">
<code class="number">15.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">float</code><code class="plain">: </code><code class="value">left</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">16.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">width</code><code class="plain">: </code><code class="value">74%</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">17.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">border</code><code class="plain">: </code><code class="value">1px</code> <code class="value">solid</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">18.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">height</code><code class="plain">: </code><code class="value">250px</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">19.</code><span class="content"><span class="block" style="margin-left: 9px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">20.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt1">
<code class="number">21.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">.footer{</code></span></span></div>
<div class="line alt2">
<code class="number">22.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">float</code><code class="plain">:</code><code class="value">left</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">23.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">width</code><code class="plain">:</code><code class="value">100%</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">24.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">border</code><code class="plain">: </code><code class="value">1px</code> <code class="value">solid</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">25.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">height</code><code class="plain">: </code><code class="value">100px</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">26.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
</div>
</div>
</div>
<a class="online_editor" href="http://www.webcoachbd.com/webcoachbdEditor/onlineEditor.php?scd=float-layout" target="_blank">প্রয়োগ দেখুন</a><br />
<br />
** float এর বাই ডিফল্ট মান none থাকে।<br />
<br />
clear
 একটা প্রোপার্টিজ আছে এটা দিয়ে floated এলিমেন্ট সরানো যায়। left, right 
এবং both মানগুলি ব্যবহার করে বামে, ডানে অথবা উভয়দিকের floated এলিমেন্ট 
সরিয়ে ফেলা যায়। একটা  floated এলিমেন্টের কোনদিকে floated এলিমেন্ট থাকবে 
আর কোনদিকে থাকবেনা এটা clear প্রোপার্টিজ দিয়ে ঠিক করা যায়। যেমন<br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_328160">
<div class="lines">
<div class="line alt1">
<code class="number">01.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">body {</code></span></span></div>
<div class="line alt2">
<code class="number">02.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">width</code><code class="plain">: </code><code class="value">400px</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">03.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">margin</code><code class="plain">: </code><code class="value">1em</code> <code class="value">auto</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">04.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt1">
<code class="number">05.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">06.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="plain">h</code><code class="value">1</code> <code class="plain">{</code></span></span></div>
<div class="line alt1">
<code class="number">07.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">float</code><code class="plain">: </code><code class="value">left</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">08.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">margin-top</code><code class="plain">: </code><code class="value">0</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">09.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt2">
<code class="number">10.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">11.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="plain">.navigation {</code></span></span></div>
<div class="line alt2">
<code class="number">12.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">float</code><code class="plain">: </code><code class="value">right</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">13.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">margin</code><code class="plain">: </code><code class="value">0</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">14.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">list-style</code><code class="plain">: </code><code class="value">none</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">15.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt2">
<code class="number">16.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">17.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="plain">.navigation li {</code></span></span></div>
<div class="line alt2">
<code class="number">18.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">float</code><code class="plain">: </code><code class="value">left</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">19.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt2">
<code class="number">20.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">21.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="plain">.navigation a {</code></span></span></div>
<div class="line alt2">
<code class="number">22.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">display</code><code class="plain">: </code><code class="value">block</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">23.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">margin-left</code><code class="plain">: </code><code class="value">0.5em</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">24.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">padding</code><code class="plain">: </code><code class="value">5px</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">25.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">border</code><code class="plain">: </code><code class="value">1px</code> <code class="value">solid</code> <code class="value">#000</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">26.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">color</code><code class="plain">: </code><code class="value">#000</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">27.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">text-decoration</code><code class="plain">: </code><code class="value">none</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">28.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt1">
<code class="number">29.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="plain">.ntext{</code></span></span></div>
<div class="line alt2">
<code class="number">30.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">clear</code><code class="plain">: </code><code class="value">both</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">31.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="plain">}</code></span></span></div>
</div>
</div>
</div>
<a class="online_editor" href="http://www.webcoachbd.com/webcoachbdEditor/onlineEditor.php?scd=clear-float" target="_blank">প্রয়োগ দেখুন</a><br />
<br />
** clear:both; উঠিয়ে দিয়ে দেখুন লেখাগুলি মেনুর আশেপাশে এলোমেলোভাবে দেখাবে।<br />
<br />
<br />
<div class="bannergroup">

সিএসএস ফ্লট টিউটোরিয়াল (CSS Float Tutorial in Bangla )

লেআউট তৈরীর সময় সিএসএস ফ্লট দিয়ে সবচেয়ে গুরত্বপূর্ন কাজটি করা হয়। এছাড়া লেখা আর ছবি একসাথে থাকলে সেখানে ফ্লট ব্যবহার করা হয়। float এর মুল...

8:46 PM

সিএসএস লেয়ার (CSS Layers)

<div dir="ltr" style="text-align: left;" trbidi="on">
এবার আমরা দেখবো  লেয়ার ব্যবহার করার মাধ্যমে কোন এলিমেন্ট  টি উপরে দেখাবে, যা<b> </b>সিএসএস
 লেয়ার এর মাধ্যমে আমরা নিয়ন্ত্রন করতে পারি।  সিএসএস এ প্রত্যেক এলিমেন্ট
 কে priority দেয়া হয়ে  থাকে। যদি দুটি  overlapping      CSS 
positioned         elements  থাকে, তাহলে যার priority বেশি তাকে আগে উপরে
 দেখাবে।<br />

Priority নির্ধারন করতে আমরা z-index value সেট করে থাকি ।যার z-index value যত বেশি তার priority  তত বেশি।<br />

<div style="display: block; height: auto; overflow: auto; width: 500px;">
<div class="syntaxhighlighter " id="highlighter_671803">
<div class="lines">
<div class="line alt1">
<code class="number">01.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">h</code><code class="value">4</code><code class="plain">{</code></span></span></div>
<div class="line alt2">
<code class="number">02.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">position</code><code class="plain">: </code><code class="value">relative</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">03.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">top</code><code class="plain">: </code><code class="value">30px</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">04.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">left</code><code class="plain">: </code><code class="value">50px</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">05.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">z-index</code><code class="plain">: </code><code class="value">2</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">06.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">background-color</code><code class="plain">: </code><code class="value">#336699</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">07.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt2">
<code class="number">08.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">09.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">10.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p {</code></span></span></div>
<div class="line alt1">
<code class="number">11.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">position</code><code class="plain">: </code><code class="value">relative</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">12.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">z-index</code><code class="plain">: </code><code class="value">1</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">13.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">background-color</code><code class="plain">: </code><code class="value">#FFCCCC</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">14.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
</div>
</div>
</div>
<b>প্রদর্শন:</b><br />

সিএসএস লেয়ার (CSS Layers)

এবার আমরা দেখবো লেয়ার ব্যবহার করার মাধ্যমে কোন এলিমেন্ট টি উপরে দেখাবে, যা সিএসএস লেয়ার এর মাধ্যমে আমরা নিয়ন্ত্রন করতে পারি। সিএসএস ...

8:44 PM

সিএসএস পজিশন টিউটোরিয়াল (CSS Position Tutorial in Bangla)

<div dir="ltr" style="text-align: left;" trbidi="on">
সিএসএস এ পজিশনিং খুব গুরত্বপূর্ন একটি বিষয়। পরিষ্কার ধারনা না থাকলে 
অনেক কাজে গিয়ে আটকা পরে যাবে। বিশেষ করে পেজের অপ্রত্যাশিত কোন জায়গায় কোন
 ছবি ইত্যাদি বসাতে হলে, একটা div বা এলিমেন্টের উপর আরেকটা div বা 
এলিমেন্ট নিতে হলে ইত্যাদি।<br />
৪ ধরনের পজিশন আছে<br />
<b>static</b><br />
বাই
 ডিফল্ট position:static; থাকে, এটার অর্থ হচ্ছে কোন পজিশনিং করা নেই। 
ডকুমেন্টের কোডের কারনে এলিমেন্টটি যেখানে আঝে পেজেও সেখানে দেখাবে।<br />
<br />
<b>relative</b><br />
এটাও
 static এর মতই কিন্তু এখানে top, left, bottom, right এবং z-index ব্যবহার
 করে এলিমেন্ট কে তার অবস্থান থেকে সরানো যাবে। relative পজিশন করলে 
এলিমেন্ট তার স্বীয় অবস্থান সাপেক্ষে থাকে। যেমন<br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_794954">
<div class="lines">
<div class="line alt1">
<code class="number">01.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">div.one{</code></span></span></div>
<div class="line alt2">
<code class="number">02.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">position</code><code class="plain">:</code><code class="value">relative</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">03.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">top</code><code class="plain">:</code><code class="value">50px</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">04.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">left</code><code class="plain">:</code><code class="value">30px</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">05.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">width</code><code class="plain">:</code><code class="value">200px</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">06.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">height</code><code class="plain">:</code><code class="value">200px</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">07.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">background</code><code class="plain">: </code><code class="value">red</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">08.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt1">
<code class="number">09.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">10.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">div.two{</code></span></span></div>
<div class="line alt1">
<code class="number">11.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">width</code><code class="plain">:</code><code class="value">200px</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">12.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">height</code><code class="plain">:</code><code class="value">200px</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">13.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">background</code><code class="plain">: </code><code class="value">maroon</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">14.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt1">
<code class="number">15.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">16.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">div.three{</code></span></span></div>
<div class="line alt1">
<code class="number">17.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">width</code><code class="plain">:</code><code class="value">200px</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">18.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">height</code><code class="plain">:</code><code class="value">200px</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">19.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">background</code><code class="plain">: </code><code class="value">black</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">20.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
</div>
</div>
</div>
<a class="online_editor" href="http://www.webcoachbd.com/webcoachbdEditor/onlineEditor.php?scd=relative-position" target="_blank">প্রয়োগ দেখুন</a><br />
<br />
দেখুন
 ১ নম্বর ডিভটি তার অবস্থান থেকে ৫০ পিক্সেল নিচে এবং ৩০ পিক্সেল বামে সরে 
এসেছে।  এমনকি ২ নম্বর ডিভের উপরে চলে এসেছে। যদি চান ১ নম্বর ডিভটি নিচে 
দেখাক তাহলে z-index : -1; বা যেকোন মাইনাস মান দিয়ে দিন নিচে চলে যাবে।<br />
**
 লক্ষনীয় বিষয় হচ্ছে বামে নিচে যাবার কারনে যে ফাকাটুকু সৃষ্টি হল সেখানে 
আর  কাউকে ঢুকতে দেয়নি। মানে ডিভটি তার আসল স্পেসটুকু হারাবেনা বরং ধরে 
রাখবে।<br />
** z-index কাজ করে তখনই যখন কোন এলিমেন্টের সিএসএস এ position করা থাকে।<br />
<br />
<b>absolute</b><br />
position:absolute;
 দিলে এলিমেন্টটি তার immediate আগের প্যারেন্ট ডিভের সাপেক্ষে সরবে (top, 
left ইত্যাদি দিয়ে)। যদি কোন প্যারেন্ট ডিভ না থাকে তাহলে <html> তথা
 ব্রাউজারের সর্ববাম এবং উপর থেকে হিসেব করে সরবে। যেমন আগের উদাহরনেই 
position:absolute করে দেন আর প্রয়োগ দেখুন।<br />
<br />
** এখানে এলিমেন্ট তার নিজের জন্য আর স্পেস ধরে রাখেনা<br />
**
 absolute পজিশন করলে এলিমেন্ট ডকুমেন্টে স্বাভাবিক অবস্থান হারিয়ে ফেলে 
মানে absolute উঠিয়ে দিলে এলিমেন্ট টি যেখানে দেখাবে, absolute দিলে সেখানে
 আর দেখাবেনা।<br />
<br />
<b>fixed</b><br />
কোন এলিমেন্টের 
পজিশন fixed দিলে সেটা ব্রাউজারের সাপেক্ষে স্থির হয়ে থাকবে এমনকি স্ক্রল 
করলেও ঐ এলিমেন্ট তার অবস্থান পরিবর্তন করবেনা। এটার কাজ হুবহু absolute এর
 মতই শুধু পার্থক্য হচ্ছে এটা সবসময় ব্রাউজারের সাপেক্ষে তার অবস্থান নেবে 
(top, left ইত্যাদি দিলে), absolute এর মত প্যারেন্ট এলিমেন্ট এর সাপেক্ষে 
সরবেনা।<br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_657750">
<div class="lines">
<div class="line alt1">
<code class="number">1.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.f_text {</code></span></span></div>
<div class="line alt2">
<code class="number">2.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">position</code><code class="plain">: </code><code class="value">fixed</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">3.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">top</code><code class="plain">: </code><code class="value">20px</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">4.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">right</code><code class="plain">: </code><code class="value">15px</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">5.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">color</code><code class="plain">: </code><code class="value">maroon</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">6.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
</div>
</div>
</div>
<a class="online_editor" href="http://www.webcoachbd.com/webcoachbdEditor/onlineEditor.php?scd=fixed-position" target="_blank">প্রয়োগ দেখুন</a><br />
<br />
** IE7, IE8 এ DOCTYPE না দিলে fixed পজিশনিং কাজ করবেনা।<br />
<br /></div>

সিএসএস পজিশন টিউটোরিয়াল (CSS Position Tutorial in Bangla)

সিএসএস এ পজিশনিং খুব গুরত্বপূর্ন একটি বিষয়। পরিষ্কার ধারনা না থাকলে অনেক কাজে গিয়ে আটকা পরে যাবে। বিশেষ করে পেজের অপ্রত্যাশিত কোন জায়গায় ক...

8:43 PM

সিএসএস প্রোপর্টিজ টিউটোরিয়াল(CSS Properties)

<div dir="ltr" style="text-align: left;" trbidi="on">
এইচটিএমএল এ তার ট্যাগ ( <b>, <body>, <a>, ইত্যাদি) 
গুলো হল এইচটিএমএল language এর গোসত এবং আলু। সিএসএস এ আপনারা tutorial 
পড়ার সময় অনেক গুলো property ( Font, Text, Box, Color ইত্যাদি) লক্ষ্য 
করেছেন ।নিচে আলোচনা করা হলো।<br />
<h3>
সিএসএস<b> </b>ফন্ট<b> </b>প্রোপার্টিজ<b>:</b></h3>
<b> </b><br />
<b> </b><br />
সিএসএস ফন্ট প্রোপার্টিজ এর সাহায্যে এর টেক্সট এর  graphical representation কে নিয়ন্ত্রন করা যায়।<br />
নিচে সিএসএস ফন্ট property  গুলো দেয়া হলো ।<br />
<ul>
<li>font</li>
<li>font-family</li>
<li>font-size</li>
<li>font-style</li>
<li>font-weight</li>
<li>font-variant</li>
</ul>
<h3>
সিএসএস<b> </b>টেক্সট<b> </b>প্রোপার্টিজ<b>:</b></h3>
<b> </b><br />
সিএসএস টেক্সট প্রোপার্টিজ যা টেক্সট এর spacing, alignment, decoration
 ইত্যাদি বিষয়গুলো নিয়ন্ত্রন করে। নিচে সিএসএস টেক্সট property  গুলো 
দেয়া হলো ।<br />
<ul>
<li>letter-spacing</li>
<li>word-spacing</li>
<li>text-decoration</li>
<li>vertical-align</li>
<li>text-transform</li>
<li>text-align</li>
<li>text-indent</li>
<li>line-height</li>
</ul>
<h3>
সিএসএস<b> বক্স </b>প্রোপার্টিজ<b>:</b></h3>
সিএসএস বক্স প্রোপার্টিজ যা এইচটিএমএল এলিমেন্ট এর ভিতরে এবং চারপাশের 
অংশকে নির্দেশ করে।এদের মধ্যে  Border, Margin এবং Padding property  গুলোর
 আবার চারটি property রয়েছে সেগুলো হল top, right, bottom এবং left ।নিচে 
সিএসএস box property  গুলো দেয়া হলো ।<br />
<ul>
<li>Margin</li>
<li>Padding</li>
<li>Border</li>
<li>Border-width</li>
<li>Border-color</li>
<li>Border-style</li>
<li>Width</li>
<li>Height</li>
<li>Float</li>
<li>Clear</li>
</ul>
<h3>
সিএসএস<b> কালার </b>প্রোপার্টিজ<b>:</b></h3>
সিএসএস কালার property নির্দেশ করে যে, কি ধরনের কালার আমরা নির্দিষ্ট 
এইচটিএমএল এলিমেন্ট এর টেক্সট এর জন্য ব্যবহার করবো। নিচে সিএসএস কালার 
property  দেয়া হলো ।<br />
Color <b> </b><br />
<b> </b><br />
<h3>
সিএসএস<b> ব্যাকগ্রাউন্ড </b>প্রোপার্টিজ<b>:</b></h3>
<b> </b><br />
সিএসএস background প্রোপার্টিজ যা background এর এমন বিষয় নিয়ন্ত্রন 
করে ,তা হলো যদি background টি single color বা image হয়ে থাকে । যদি তা 
image হয়ে থাকে তাহলো আপনি image  এর position ঠিক করতে পারেন । আপনি 
image কে    repeat left-to-right      অথবা top-to-bottom করতে পারেন। 
নিচে সিএসএস background property  গুলো দেয়া হলো ।<br />
<br />
<ul>
<li>Background</li>
<li>Background Color</li>
<li>Background Image</li>
<li>Background Repeat</li>
<li>Background Attachment</li>
<li>Background Position</li>
</ul>
<h3>
সিএসএস<b> Classification </b>প্রোপার্টিজ<b>:</b></h3>
<b> </b><br />
<b> </b><br />
Display<br />
Whitespace<br />
List Style<br />
List Style Type<br />
List Style Image<br />
List Style Position</div>
<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaiEMqB9fSalSPsQlASlN604WO1WscQ7cZAJSr-NIPQjQ0HziRfb8PM6hLSREhpbM3pkQCy_kTwBjL4qjwzmtvJOs6eHtQylNZxoYTr7B08kx5UcyyF__Ox_j9XyAMJNIvT5gUFuj4cBs/s1600/u-Q1mBzvxrZjPk_yL2c7yryTqMvVIIoevZTiMq946n9dpKvM96pBg35fvjKbSjE5sduRd_VDx6zowrPc3g%25253Dw256-h256-nc.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaiEMqB9fSalSPsQlASlN604WO1WscQ7cZAJSr-NIPQjQ0HziRfb8PM6hLSREhpbM3pkQCy_kTwBjL4qjwzmtvJOs6eHtQylNZxoYTr7B08kx5UcyyF__Ox_j9XyAMJNIvT5gUFuj4cBs/s640/u-Q1mBzvxrZjPk_yL2c7yryTqMvVIIoevZTiMq946n9dpKvM96pBg35fvjKbSjE5sduRd_VDx6zowrPc3g%25253Dw256-h256-nc.png"> </a> </div>

সিএসএস প্রোপর্টিজ টিউটোরিয়াল(CSS Properties)

এইচটিএমএল এ তার ট্যাগ ( <b>, <body>, <a>, ইত্যাদি) গুলো হল এইচটিএমএল language এর গোসত এবং আলু। সিএসএস এ আপনারা tutorial ...

8:43 PM

সিএসএস কার্সর টিউটোরিয়াল (CSS Cursor Tutorial in Bangla)

<div dir="ltr" style="text-align: left;" trbidi="on">
যেকোন লিংক বা লেখার উপরে মাউস নিয়ে গেলে সাধারনত হাতের চিহ্ন বা তীর 
চেহ্ন ইত্যাদি দেখায়। সিএসএস দিয়ে এই চিহ্ন পরিবর্তন করা যায়।cursor নামের 
একটি প্রোপার্টিজ আছে সেটা দিয়ে পরিবর্তন করা যায়, cursor এর অনেকগুলি মান 
আছে যেমন<br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_561953">
<div class="lines">
<div class="line alt1">
<code class="number">01.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">a.one{</code></span></span></div>
<div class="line alt2">
<code class="number">02.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">03.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="plain">cursor : </code><code class="value">wait</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">04.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">05.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt2">
<code class="number">06.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">07.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">a.two{</code></span></span></div>
<div class="line alt2">
<code class="number">08.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">09.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">cursor</code><code class="plain">: </code><code class="value">crosshair</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">10.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">11.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt2">
<code class="number">12.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">13.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.three{</code></span></span></div>
<div class="line alt2">
<code class="number">14.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">15.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">cursor</code><code class="plain">: </code><code class="value">help</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">16.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">17.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt2">
<code class="number">18.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">19.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">a.four{</code></span></span></div>
<div class="line alt2">
<code class="number">20.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">21.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">cursor</code><code class="plain">: </code><code class="value">pointer</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">22.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">23.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt2">
<code class="number">24.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">25.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.five{</code></span></span></div>
<div class="line alt2">
<code class="number">26.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">27.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">cursor</code><code class="plain">: text;</code></span></span></div>
<div class="line alt2">
<code class="number">28.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">29.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt2">
<code class="number">30.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.six{</code></span></span></div>
<div class="line alt1">
<code class="number">31.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">32.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">cursor</code><code class="plain">: </code><code class="value">none</code><code class="plain">; </code></span></span></div>
<div class="line alt1">
<code class="number">33.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">34.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt1">
<code class="number">35.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.seven{</code></span></span></div>
<div class="line alt2">
<code class="number">36.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">37.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">cursor</code><code class="plain">: context-menu;</code></span></span></div>
<div class="line alt2">
<code class="number">38.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">39.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt2">
<code class="number">40.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.eight{</code></span></span></div>
<div class="line alt1">
<code class="number">41.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">42.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">cursor</code><code class="plain">: cell; </code></span></span></div>
<div class="line alt1">
<code class="number">43.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">44.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt1">
<code class="number">45.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.nine{</code></span></span></div>
<div class="line alt2">
<code class="number">46.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">47.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">cursor</code><code class="plain">: vertical-text;</code></span></span></div>
<div class="line alt2">
<code class="number">48.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">49.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt2">
<code class="number">50.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.ten{</code></span></span></div>
<div class="line alt1">
<code class="number">51.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">52.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">cursor</code><code class="plain">: alias;</code></span></span></div>
<div class="line alt1">
<code class="number">53.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">54.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt1">
<code class="number">55.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.eleven{</code></span></span></div>
<div class="line alt2">
<code class="number">56.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">57.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">cursor</code><code class="plain">: </code><code class="value">n-resize</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">58.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">59.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt2">
<code class="number">60.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.twelve{</code></span></span></div>
<div class="line alt1">
<code class="number">61.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">62.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">cursor</code><code class="plain">: no-drop;</code></span></span></div>
<div class="line alt1">
<code class="number">63.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">64.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt1">
<code class="number">65.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.thirteen{</code></span></span></div>
<div class="line alt2">
<code class="number">66.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">67.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">cursor</code><code class="plain">: not-allowed;</code></span></span></div>
<div class="line alt2">
<code class="number">68.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">69.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt2">
<code class="number">70.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.fourteen{</code></span></span></div>
<div class="line alt1">
<code class="number">71.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">72.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">cursor</code><code class="plain">: all-</code><code class="value">scroll</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">73.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">74.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt1">
<code class="number">75.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.fifteen{</code></span></span></div>
<div class="line alt2">
<code class="number">76.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">77.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">cursor</code><code class="plain">: col-resize;</code></span></span></div>
<div class="line alt2">
<code class="number">78.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">79.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt2">
<code class="number">80.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.sixteen{</code></span></span></div>
<div class="line alt1">
<code class="number">81.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">82.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">cursor</code><code class="plain">: row-resize;</code></span></span></div>
<div class="line alt1">
<code class="number">83.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">84.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt1">
<code class="number">85.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.seventeen{</code></span></span></div>
<div class="line alt2">
<code class="number">86.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">87.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">cursor</code><code class="plain">: </code><code class="value">n-resize</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">88.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">89.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
</div>
</div>
</div>
<a class="online_editor" href="http://www.webcoachbd.com/webcoachbdEditor/onlineEditor.php?scd=cursor" target="_blank">প্রয়োগ দেখুন</a><br />
এরুপ আরো আছে<br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_363857">
<div class="lines">
<div class="line alt1">
<code class="number">01.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">{ </code><code class="keyword">cursor</code><code class="plain">: </code><code class="value">w-resize</code><code class="plain">; }</code></span></span></div>
<div class="line alt2">
<code class="number">02.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">{ </code><code class="keyword">cursor</code><code class="plain">: ns-resize; }</code></span></span></div>
<div class="line alt1">
<code class="number">03.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">{ </code><code class="keyword">cursor</code><code class="plain">: ew-resize; }</code></span></span></div>
<div class="line alt2">
<code class="number">04.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">{ </code><code class="keyword">cursor</code><code class="plain">: </code><code class="value">ne-resize</code><code class="plain">; }</code></span></span></div>
<div class="line alt1">
<code class="number">05.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">{ </code><code class="keyword">cursor</code><code class="plain">: </code><code class="value">nw-resize</code><code class="plain">; }</code></span></span></div>
<div class="line alt2">
<code class="number">06.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">{ </code><code class="keyword">cursor</code><code class="plain">: </code><code class="value">se-resize</code><code class="plain">; }</code></span></span></div>
<div class="line alt1">
<code class="number">07.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">{ </code><code class="keyword">cursor</code><code class="plain">: </code><code class="value">sw-resize</code><code class="plain">; }</code></span></span></div>
<div class="line alt2">
<code class="number">08.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">{ </code><code class="keyword">cursor</code><code class="plain">: nesw-resize; }</code></span></span></div>
<div class="line alt1">
<code class="number">09.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">{ </code><code class="keyword">cursor</code><code class="plain">: nwse-resize; }</code></span></span></div>
<div class="line alt2">
<code class="number">10.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">{</code><code class="keyword">cursor</code><code class="plain">: </code><code class="value">url</code><code class="plain">(images/my-cursor.png), </code><code class="value">auto</code><code class="plain">;}</code></span></span></div>
</div>
</div>
</div>
<br />
**
 কিছু কিছু ব্রাউজারে কিছু কিছু cursor এর মান সাপোর্ট করেনা যেমন cursor :
 none; ফায়ারফক্স ৩, সাফারি ৫ এবং ক্রোম ৫ এ সাপোর্টেড না। আবার ছবি 
অপেরাতে সাপোর্ট করেনা এবং IE + Opera তে নিম্নোক্তগুলি সাপোর্ট করেনা<br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_187746">
<div class="lines">
<div class="line alt1">
<code class="number">1.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">{</code><code class="keyword">cursor</code><code class="plain">: not-allowed;}</code></span></span></div>
<div class="line alt2">
<code class="number">2.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">{</code><code class="keyword">cursor</code><code class="plain">: no-drop;}</code></span></span></div>
<div class="line alt1">
<code class="number">3.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">{</code><code class="keyword">cursor</code><code class="plain">:vertical-text;}</code></span></span></div>
<div class="line alt2">
<code class="number">4.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">{</code><code class="keyword">cursor</code><code class="plain">: all-</code><code class="value">scroll</code><code class="plain">;}</code></span></span></div>
<div class="line alt1">
<code class="number">5.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">{</code><code class="keyword">cursor</code><code class="plain">: col-resize;}</code></span></span></div>
<div class="line alt2">
<code class="number">6.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">{</code><code class="keyword">cursor</code><code class="plain">: row-resize;}</code></span></span></div>
</div>
</div>
</div>
<br /><br /></div>

সিএসএস কার্সর টিউটোরিয়াল (CSS Cursor Tutorial in Bangla)

যেকোন লিংক বা লেখার উপরে মাউস নিয়ে গেলে সাধারনত হাতের চিহ্ন বা তীর চেহ্ন ইত্যাদি দেখায়। সিএসএস দিয়ে এই চিহ্ন পরিবর্তন করা যায়।cursor নামের...

8:42 PM

সিএসএস লিংক টিউটোরিয়াল (CSS Link Tutorial in bangla)

<div dir="ltr" style="text-align: left;" trbidi="on">
এইচটিএমএল লিংক কে সিএসএস দিয়ে চমৎকার স্টাইল করা যায়। যেমন<br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_324015">
<div class="lines">
<div class="line alt1">
<code class="number">1.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">a{</code></span></span></div>
<div class="line alt2">
<code class="number">2.</code><span class="content"><span class="block" style="margin-left: 18px !important;"><code class="keyword">color</code><code class="plain">: </code><code class="value">maroon</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">3.</code><span class="content"><span class="block" style="margin-left: 18px !important;"><code class="keyword">text-decoration</code><code class="plain">:</code><code class="value">none</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">4.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt1">
<code class="number">5.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
</div>
</div>
</div>
<a class="online_editor" href="http://www.webcoachbd.com/webcoachbdEditor/onlineEditor.php?scd=link-style" target="_blank">উদাহরন</a><br />
<br />
এখন
 ধরুন আপনি চান লিংকের রং মেরুন রংয়ের দেখাক কিন্তু যখন একবার ইউজার 
লিংটিতে ক্লিক করবে এরপর থেকে লাল দেখাবে যাতে করে ইউজার বুঝতে পারে কোন 
কোন লিংক সে ভিজিট করেছে। এসব করতে সিএসএস বিশেষ ক্লাস আছে নাম 
pseudo-class.<br />
কয়েক ধরনের সিডো ক্লাস আছে যেমন<br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_848295">
<div class="lines">
<div class="line alt1">
<code class="number">01.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">a{</code></span></span></div>
<div class="line alt2">
<code class="number">02.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">color</code><code class="plain">:</code><code class="value">maroon</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">03.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">text-decoration</code><code class="plain">:</code><code class="value">none</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">04.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt1">
<code class="number">05.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">a:visited{</code></span></span></div>
<div class="line alt2">
<code class="number">06.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">color</code><code class="plain">:</code><code class="value">red</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">07.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt2">
<code class="number">08.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">a:hover{</code></span></span></div>
<div class="line alt1">
<code class="number">09.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">color</code><code class="plain">: </code><code class="value">#000</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">10.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="plain">text-decoration : </code><code class="value">underline</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">11.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt2">
<code class="number">12.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">a:focus{</code></span></span></div>
<div class="line alt1">
<code class="number">13.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">color</code><code class="plain">: magenta;</code></span></span></div>
<div class="line alt2">
<code class="number">14.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt1">
<code class="number">15.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">a:active{</code></span></span></div>
<div class="line alt2">
<code class="number">16.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">color</code><code class="plain">: yellow;</code></span></span></div>
<div class="line alt1">
<code class="number">17.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
</div>
</div>
</div>
<a class="online_editor" href="http://www.webcoachbd.com/webcoachbdEditor/onlineEditor.php?scd=pseudo-class" target="_blank">প্রয়োগ দেখুন</a><br />
<br />
**
 সিডো ক্লাস দিয়ে স্টাইলিং করতে সিলেক্টর এরপর কোলন (:) দিয়ে বিশেষ নামটি 
(যেমন visited, active, hover ইত্যাদি) দিতে হয়। যেমন উপরের নামগুলি দেখুন 
বোঝাই যাচ্ছে কোনটার কাজ কি।<br />
a:visited দিয়ে যে স্টাইল দিয়েছি সেটা 
শুধু কোন লিংক ভিজিট হলেই সেই লিংকের উপর প্রয়োগ হবে আবার a:hover এর কারনে
 লিংকের উপর মাউস নিয়ে গেলে রং কালো এবং লিংকের নিচে রেখা চলে আসবে।<br />
এভাবে a:active এর কারনে লিংক একটিভ থাকলে এখানকার স্টাইলগুলি কার্যকর হবে এভাবে বাকিগুলি।<br />
<br />
** বাই ডিফল্ট লিংকের নিচে একটা রেখা থাকে যদি উঠিয়ে দিতে চান তাহলে text-decoration : none; দিতে হয় যেমন ৩ নম্বর লাইনে দিয়েছি।<br />
<br />
**
 আমি এখানে দু/একটি করে প্রোপার্টিজ দিয়ে স্টাইল করেছি আপনি সিএসএস এর 
যেকোন প্রোপার্টিজ ব্যবহার করে ইচ্ছেমত স্টাইল করতে পারেন এমনকি ছবিও দিতে 
পারেন।</div>

সিএসএস লিংক টিউটোরিয়াল (CSS Link Tutorial in bangla)

এইচটিএমএল লিংক কে সিএসএস দিয়ে চমৎকার স্টাইল করা যায়। যেমন 1. a{ 2. color : maroon ; 3. text-decoration : none ; 4. 5. } ...

8:41 PM

সিএসএস লিস্ট টিউটোরিয়াল (CSS List Tutorial in Bangla)

<div dir="ltr" style="text-align: left;" trbidi="on">
এইচটিএমএল এ দুই ধরনের এলিমেন্ট আছে লিস্ট তৈরীর জন্য এটা আগে আমরা জেনে এসেছি। <ul></ul> এবং <ol></ol><br />
নেভিগেশন
 মেনু বা যেকোন তালিকা তৈরীর সময় এই ul, ol এবং li ব্যবহার করে থাকি। এই 
লিস্ট স্টাইলিং এর জন্য সিএসএস এ বেশ কয়েকটি প্রোপার্টিজ আছে। যেমন<br />
list-style-type, list-style-position, list-style-image, list-style, marker-offset<br />
<br />
<b>list-style-type</b><br />
যখন লিস্ট তৈরী করা হয় তখন (ul দিয়ে) বাই ডিফল্ট প্রতিটি লিস্টের সামনে একটা করে বুলেট চলে আসে যেমন<br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_573577">
<div class="lines">
<div class="line alt1">
<code class="number">1.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain"><ul></code></span></span></div>
<div class="line alt2">
<code class="number">2.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain"><li>HTML</li></code></span></span></div>
<div class="line alt1">
<code class="number">3.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">4.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain"><li>CSS</li></code></span></span></div>
<div class="line alt1">
<code class="number">5.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain"><li>PHP</li></code></span></span></div>
<div class="line alt2">
<code class="number">6.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain"><li>MySQL</li></code></span></span></div>
<div class="line alt1">
<code class="number">7.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain"></ul></code></span></span></div>
</div>
</div>
</div>
<a class="online_editor" href="http://www.webcoachbd.com/webcoachbdEditor/onlineEditor.php?scd=list" target="_blank">প্রয়োগ দেখুন</a><br />
৭ নম্বর লাইনের "disc" বাই ডিফল্ট থাকে। অর্থ্যাৎ list-style-type: disc; না দিলেও বুলেট দেখাবে।<br />
এখন list-style-type দিয়ে এই বুলেটের পরিবর্তে অন্যান্য চিহ্ন আনা যায়। যেমন ul এর জন্য যেসব চিহ্ন দেয়া যায়<br />
<br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_279501">
<div class="lines">
<div class="line alt1">
<code class="number">01.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain"><style></code></span></span></div>
<div class="line alt2">
<code class="number">02.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">ul.first li {</code></span></span></div>
<div class="line alt1">
<code class="number">03.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">list-style-type</code><code class="plain">:</code><code class="value">none</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">04.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt1">
<code class="number">05.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">06.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">ul.second li {</code></span></span></div>
<div class="line alt1">
<code class="number">07.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">list-style-type</code><code class="plain">:</code><code class="value">disc</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">08.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt1">
<code class="number">09.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">10.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">ul.third li {</code></span></span></div>
<div class="line alt1">
<code class="number">11.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">list-style-type</code><code class="plain">:</code><code class="value">circle</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">12.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt1">
<code class="number">13.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">14.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">ul.fourth li {</code></span></span></div>
<div class="line alt1">
<code class="number">15.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">list-style-type</code><code class="plain">:</code><code class="value">square</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">16.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt1">
<code class="number">17.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain"></style></code></span></span></div>
</div>
</div>
</div>
<a class="online_editor" href="http://www.webcoachbd.com/webcoachbdEditor/onlineEditor.php?scd=ul-list" target="_blank">প্রয়োগ দেখুন</a><br />
<br />
ol এর জন্যও বেশ কয়েকটি মান ব্যবহার করা যায় যেমন<br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_57335">
<div class="lines">
<div class="line alt1">
<code class="number">1.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">list-style-type:decimal;</code></span></span></div>
<div class="line alt2">
<code class="number">2.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">list-style-type:decimal-leading-zero;</code></span></span></div>
<div class="line alt1">
<code class="number">3.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">list-style-type:lower-alpha;</code></span></span></div>
<div class="line alt2">
<code class="number">4.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">list-style-type:upper-alpha;</code></span></span></div>
<div class="line alt1">
<code class="number">5.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">list-style-type:lower-roman;</code></span></span></div>
<div class="line alt2">
<code class="number">6.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">list-style-type:upper-roman;</code></span></span></div>
</div>
</div>
</div>
উদাহরন
 আর দিলাম না। খুব সহজ, মান দেখেই বোঝা যাচ্ছে কোনটা দেখতে কেমন হবে। দেখতে
 চাইলে ol এবং li দিয়ে লিস্ট বানিয়ে স্টাইলগুলি প্রয়োগ করে দেখুন।<br />
<br />
<b>list-style-position</b><br />
এই
 প্রোপার্টিজ দিয়ে চিহ্নগুলি বা থেকে একটু ভিতরে না বাহিরে তা ঠিক করা যায়।
 এটার বাই ডিফল্ট মান থাকে "outside", এছাড়া inside দিলে বা থেকে সরে একটু 
ডানে দেখাবে যেমন<br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_807100">
<div class="lines">
<div class="line alt1">
<code class="number">1.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">ul.third li {</code></span></span></div>
<div class="line alt2">
<code class="number">2.</code><span class="content"><span class="block" style="margin-left: 27px !important;"><code class="keyword">list-style-type</code><code class="plain">:</code><code class="value">circle</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">3.</code><span class="content"><span class="block" style="margin-left: 27px !important;"><code class="keyword">list-style-position</code><code class="plain">:</code><code class="value">inside</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">4.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
</div>
</div>
</div>
<a class="online_editor" href="http://www.webcoachbd.com/webcoachbdEditor/onlineEditor.php?scd=position-inside" target="_blank">প্রয়োগ দেখুন</a><br />
<br />
<b>list-style-image</b><br />
এটা দিয়ে চিহ্নের বদলে ছবি দেয়া যায়। যেমন<br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_196498">
<div class="lines">
<div class="line alt1">
<code class="number">1.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">list-style-image</code><code class="plain">:</code><code class="value">url</code><code class="plain">(images/custom_bullet.png);</code></span></span></div>
</div>
</div>
</div>
<br />
<b>list-style</b><br />
এটা
 হল শর্টহ্যান্ড প্রোপার্টি। উপরের ৩ টি প্রোপার্টিজের কার এই্ একটি দিয়ে 
করা যায়। উপরের গুলি বেশি ব্যবহার হয়না। list-style দিয়েই সবসময় সাধারনত 
কাজ করা হয়। যেমন<br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_192176">
<div class="lines">
<div class="line alt1">
<code class="number">1.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">ul.third li {</code></span></span></div>
<div class="line alt2">
<code class="number">2.</code><span class="content"><span class="block" style="margin-left: 27px !important;"><code class="keyword">list-style</code><code class="plain">:</code><code class="value">url</code><code class="plain">(../images/cancel_f</code><code class="value">2</code><code class="plain">.png) </code><code class="value">inside</code> <code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">3.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
</div>
</div>
</div>
<br /><a class="online_editor" href="http://www.webcoachbd.com/webcoachbdEditor/onlineEditor.php?scd=list-style" target="_blank">প্রয়োগ দেখুন</a><br />
<br />
list-style : আগে list-style-type এরপর list-style-position শেষে list-style-image<br />
<br />
এই
 list-style টাই বেশি ব্যবহার হতে দেখবেন। বেশিরভাগ সময় মেনু তৈরীর সময় ul 
এর ভিতর যখন অনেক li থাকে তখন এর বাই ডিফল্ট বুলেট সরানোর জন্য 
list-style:none; ব্যবহার করা হয়।<br />
** list-style:none; এভাবে একটা মানও ব্যবহার করা যায়। একটা মান দিলে সেটা list-style-type হিসেবে নেবে।</div>

সিএসএস লিস্ট টিউটোরিয়াল (CSS List Tutorial in Bangla)

এইচটিএমএল এ দুই ধরনের এলিমেন্ট আছে লিস্ট তৈরীর জন্য এটা আগে আমরা জেনে এসেছি। <ul></ul> এবং <ol></ol> নেভিগেশন মেন...

8:40 PM

সিএসএস বর্ডার টিউটোরিয়াল (CSS Border Tutorial in Bangla)

<div dir="ltr" style="text-align: left;" trbidi="on">
এইচটিএমএল এলিমেন্ট এর চারপাশে বর্ডার দেয়া যায়। border-style, 
border-width, border-color ইত্যাদি প্রোপার্টি দিয়ে এই বর্ডারের অনেক 
স্টাইল করা যায়।<br />
যেমন<br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_153069">
<div class="lines">
<div class="line alt1">
<code class="number">01.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.one {</code></span></span></div>
<div class="line alt2">
<code class="number">02.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">border-style</code><code class="plain">: </code><code class="value">solid</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">03.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">border-width</code><code class="plain">: </code><code class="value">3px</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">04.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">border-color</code><code class="plain">: </code><code class="value">maroon</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">05.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">06.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt1">
<code class="number">07.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">08.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.two {</code></span></span></div>
<div class="line alt1">
<code class="number">09.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">border-style</code><code class="plain">: </code><code class="value">solid</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">10.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">border-width</code><code class="plain">: </code><code class="value">medium</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">11.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt2">
<code class="number">12.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.three{</code></span></span></div>
<div class="line alt1">
<code class="number">13.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">border-style</code><code class="plain">: </code><code class="value">double</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">14.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt1">
<code class="number">15.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.four{</code></span></span></div>
<div class="line alt2">
<code class="number">16.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">border-style</code><code class="plain">: </code><code class="value">groove</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">17.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt2">
<code class="number">18.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.five{</code></span></span></div>
<div class="line alt1">
<code class="number">19.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">border-style</code><code class="plain">: </code><code class="value">dotted</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">20.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt1">
<code class="number">21.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.six{</code></span></span></div>
<div class="line alt2">
<code class="number">22.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">border-style</code><code class="plain">: </code><code class="value">dashed</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">23.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt2">
<code class="number">24.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.seven{</code></span></span></div>
<div class="line alt1">
<code class="number">25.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">border-style</code><code class="plain">: </code><code class="value">inset</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">26.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt1">
<code class="number">27.</code><span class="content"><span class="block" style="margin-left: 0px !important;"> </span></span></div>
<div class="line alt2">
<code class="number">28.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.eight{</code></span></span></div>
<div class="line alt1">
<code class="number">29.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">border-style</code><code class="plain">: </code><code class="value">outset</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">30.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt1">
<code class="number">31.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.nine{</code></span></span></div>
<div class="line alt2">
<code class="number">32.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">border-style</code><code class="plain">: </code><code class="value">ridge</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">33.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
<div class="line alt2">
<code class="number">34.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">p.ten{</code></span></span></div>
<div class="line alt1">
<code class="number">35.</code><span class="content"><span class="block" style="margin-left: 9px !important;"><code class="keyword">border-style</code><code class="plain">: </code><code class="value">hidden</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">36.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">}</code></span></span></div>
</div>
</div>
</div>
 <a class="online_editor" href="http://www.webcoachbd.com/webcoachbdEditor/onlineEditor.php?scd=border" target="_blank">প্রয়োগ দেখুন</a><br />
<br />
** border-width প্রোপার্টি টি একা থাকলে কাজ করবেনা, তার আগে border-style দিয়ে আসতে হবে।<br />
<br />
চারদিকের বর্ডারের জন্য ৪ রকম স্টাইল করা যাবে যেমন<br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_529798">
<div class="lines">
<div class="line alt1">
<code class="number">1.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">border-left-width</code><code class="plain">: </code><code class="value">10px</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">2.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">border-right-width</code><code class="plain">: </code><code class="value">10px</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">3.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">border-top-style</code><code class="plain">: </code><code class="value">dotted</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">4.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">border-right-style</code><code class="plain">: </code><code class="value">solid</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">5.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">border-bottom-style</code><code class="plain">: </code><code class="value">dashed</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">6.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">border-left-style</code><code class="plain">: </code><code class="value">ridge</code><code class="plain">;</code></span></span></div>
</div>
</div>
</div>
</div>

সিএসএস বর্ডার টিউটোরিয়াল (CSS Border Tutorial in Bangla)

এইচটিএমএল এলিমেন্ট এর চারপাশে বর্ডার দেয়া যায়। border-style, border-width, border-color ইত্যাদি প্রোপার্টি দিয়ে এই বর্ডারের অনেক স্টাইল ক...

8:39 PM

সিএসএস প্যাডিং এবং মার্জিন টিউটোরিয়াল (CSS Padding & Margin Tutorial in Bangla)

<div dir="ltr" style="text-align: left;" trbidi="on">
প্যাডিং হচ্ছে এইচটিএমএল এলিমেন্টের বর্ডার এবং কনটেন্টের মাঝখানের 
দুরত্ব। যেকোন একটা এইচটিএমএল এলিমেন্টে সিএসএস দিয়ে বর্ডার দিন এবার 
সেখানে প্যাডিং দিন তাহলে স্পষ্ট দেখতে/বুঝতে পারবেন যে প্যাডিং দিলে কোথায়
 ফাকা বা স্পেস বাড়ে। যেমন <br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_424910">
<div class="lines">
<div class="line alt1">
<code class="number">1.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">border : </code><code class="value">2px</code> <code class="value">solid</code> <code class="value">#fff</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">2.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">padding : </code><code class="value">5px</code><code class="plain">;</code></span></span></div>
</div>
</div>
</div>
<br /><a class="online_editor" href="http://www.webcoachbd.com/webcoachbdEditor/onlineEditor.php?scd=padding" target="_blank">প্রয়োগ দেখুন</a><br />
<br />
padding : 5px; দেয়াতে এলিমেন্টের চারিদিকে ৫ পিক্সেল করে স্পেস হবে। শুধু একদিকে বা কয়েক দিকেও প্যাডিং দেয়া যায়। যেমন <br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_147782">
<div class="lines">
<div class="line alt1">
<code class="number">1.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">padding-</code><code class="value">top</code> <code class="plain">: </code><code class="value">5px</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">2.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">padding-bottom</code><code class="plain">: </code><code class="value">5px</code><code class="plain">;</code></span></span></div>
<div class="line alt1">
<code class="number">3.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">padding-right</code><code class="plain">: </code><code class="value">5px</code><code class="plain">;</code></span></span></div>
<div class="line alt2">
<code class="number">4.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="keyword">padding-left</code><code class="plain">: </code><code class="value">5px</code><code class="plain">;</code></span></span></div>
</div>
</div>
</div>
এভাবে চারবার লেখার কাজ একবারে করা যায়, এটাকে শর্টহ্যান্ড প্রোপার্টি বলে যেমন।<br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_126223">
<div class="lines">
<div class="line alt1">
<code class="number">1.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">padding : </code><code class="value">5px</code><code class="plain">;</code></span></span></div>
</div>
</div>
</div>
অথবা<br />
<div style="display: block; height: auto; overflow: auto; width: inherit;">
<div class="syntaxhighlighter " id="highlighter_260088">
<div class="lines">
<div class="line alt1">
<code class="number">1.</code><span class="content"><span class="block" style="margin-left: 0px !important;"><code class="plain">padding : </code><code class="value">5px</code> <code class="value">6px</code> <code class="value">2px</code> <code class="value">4px</code><code class="plain">;</code></span></span></div>
</div>
</div>
</div>
এখানে ঘরির কাটার মত করে হিসেব করে বের করতে হয় যেমন উপরে ৫ পিক্সেল এরপর ডানে ৬ পিক্সেল তারপর নিচে ২ এবং সবশেষে বামে ৪ পিক্সেল।<br />
<br />
** padding এর মান পিক্সেল (px), em বা % দিয়ে দেয়া যাবে।<br />
<br />
** যদি padding এর মান ২টি দেয়া হয় তবে প্রথমটি উপরে নিচে এবং পরের মানটি ডানে বামের জন্য হয়ে যাবে। যেমন <br />
padding : 10px 4px; হলে উপরে নিচে ১০ পিক্সেল এবং ডানে বামে ৪ পিক্লে করে প্যাডিং হবে।<br />
<br />
** ৩ টি মান দিলে প্রথমটি উপরে এরপরেরটি ডানে বামে এবা শেষেরটি নিচের প্যাডিং হিসেবে নিবে।<br />
<br />
<b>width এর সাথে padding যোগ হয়:</b><br />
যেমন
 কোন এলিমেন্টের width : 100px; আছে এবং এখানে padding : 10px; আছে, তাহলে 
শেষ পর্যন্ত এলিমেন্টের width হয়ে যাবে ১২০ পিক্সেল। এই সমস্যার জন্য যদি 
box-sizing : border-box; ব্যবহার করে তবে আসল width ফেরৎ আসবে।<br />
<a class="online_editor" href="http://www.webcoachbd.com/webcoachbdEditor/onlineEditor.php?scd=padding-width" target="_blank">প্রয়োগ দেখুন</a><br />
<br />
এখানে দেখবেন width এর সাথে কিভাবে প্যাডিং যোগ হয়ে যায় আবার box-sizing প্রোপার্টি ব্যবহার করে দেখুন সমাধান হয়ে যাবে।<br />
<br />
<br />
<b>মার্জিন (Margin)</b><br />
==============================<br />
মার্জিন
 দিয়ে এলিমেন্টের বাইরে (বর্ডারের বাইরে) দুরত্ব বা স্পেস তৈরী করা যায়। 
মান দেয়ার নিয়ম padding এর মতই শুধু এখানে অতিরিক্ত একটা মান auto দেয়া 
যায়।<br />
<a class="online_editor" href="http://www.webcoachbd.com/webcoachbdEditor/onlineEditor.php?scd=margin" target="_blank">প্রয়োগ দেখুন</a><br />
কোথাও মান auto দিলে ব্রাউজার হিসেব করে একটা মান নিয়ে নেয়।<br />
<br />
**
 কোন এলিমেন্টকে যদি div এর মাঝে আনতে হয় তবে সেখানে দুটি প্রোপার্টিজ দিয়ে
 করা যায়। মার্জিন margin : 0 auto; দেন এবং width নির্দিষ্ট করে দেন। 
সেটার parent div এর ঠিক মাঝামাঝি চলে আসবে (আড়াঅাড়ি ভাবে)। যদি কোন div এর
 ভিতর না থাকে তবে ব্রাউজারের মাঝে চলে আসবে।<br />
** প্যাডিং এর মত এখানে width যোগ হয়না।</div>

সিএসএস প্যাডিং এবং মার্জিন টিউটোরিয়াল (CSS Padding & Margin Tutorial in Bangla)

প্যাডিং হচ্ছে এইচটিএমএল এলিমেন্টের বর্ডার এবং কনটেন্টের মাঝখানের দুরত্ব। যেকোন একটা এইচটিএমএল এলিমেন্টে সিএসএস দিয়ে বর্ডার দিন এবার সেখান...

8:38 PM