ওয়েব ডেভোলপমেন্ট- CSS পর্ব - ৬ ।। 10% for shy-fox

আসসালামু আলাইকুম বন্ধুরা, কেমন আছেন সবাই? আশা করছি সকলে সুস্থ ও ভালো আছেন। বেশ কয়েকদিন আগে আমি আপনাদের মাঝে HTML এর একটি সিরিজ নিয়ে এসেছিলাম। এবার CSS এর উপর আর্টিকেল লেখা শুরু করেছি। ইতিমধ্যে পাঁচটি পর্ব শেষ করেছি। যারা ওয়েব সাইট ডেভোলপ করতে চান আমার এই আর্টিকেল গুলো পড়লে আশা করছি বেসিক একটি ধারনা নিতে পারবেন এবং সেই সাথে আমি আশা করবো আপনারা আমার পাশে থেকে আমাকে উৎসাহিত করে যাবেন। গত সিরিজের সব লিংক আমি নিচে দিয়ে দিচ্ছি আপনারা চাইলে ভিজিট করে আসতে পারেন। তো চলুন তবে কম্পিউটার ওপেন করে ভি এস কোড নিয়ে বসে পড়া যাক।

• CSS Icons

  ▪️ Font Awesome Icons
  ▪️ Bootstrap Icons

• CSS Lists

  ▪️ HTML Lists and CSS List Properties
  ▪️ Different List Item Markers
  ▪️ Styling List With Colors

ওয়েব সাইটে মাঝে মধ্যে আমাদের বিভিন্ন ধরনের আইকন ব্যবহার করার দরকার হয়ে থাকে। এর জন্য আমরা কয়েকভাবে ওয়েব সাইটে আইকন এড করতে পারি। আমি দুইটি সাইট থেকে কিভাবে আইকন ব্যবহার করা যায় তা দেখিয়ে দিচ্ছি। আইকন ব্যবহার করার জন্য খুবই পপুলার একটি সাইটের নাম Font Awesome Icons গুগলে সার্চ দিলেই এই সাইট আমরা পেয়ে যাব। কিভাবে Font Awesome Icons গুলো নিজের কোডে ব্যবহার করে ওয়েব সাইটে শো করানো যায় তা আমি ধাপে ধাপে এখন বর্ণনা করছি।

• প্রথমে গুগলে সার্চ দিয়ে Font Awesome Icons এর ওয়েব সাইটে যেতে হবে।

• এরপর ইমেল ও পাসওয়ার্ড দিয়ে সাইন ইন করার পর নিচের স্কিন শর্ট এর মতো একটি ইন্টারফেস আসবে।

• এরপর কিট এর উপর ক্লিক করতে হবে। ক্লিক করার পর নিচের মতো একটি ইন্টারফেস আসবে। সেখান থেকে কোডটি কপি করে আপনার এইচ টি এম এল এর হেড সেকশন এর মধ্যে বসিয়ে দিতে হবে।

• এবার আইকন এড করার জন্য আপনি যে ধরনের আইকন চাচ্ছেন তার নাম লিখে সার্চ বক্সে সার্চ দিলে অনেক আইকন চলে আসবে। এগুলোর জন্য স্পেছিফিক কোড আছে যেগুলো আপনাকে আপনার কোডে এড করতে হবে তা না হলে আইকনটি শো করবে না। আমি ফোনের একটি আইকন এড করতে চাচ্ছি। এজন্য আইকনটি সার্চ দিলাম। পছন্দমতো একটি আইকন সিলেক্ট করে তার উপরে ক্লিক করলে নিচের মতো একটি ইন্টারফেস দেখাবে। এখান থেকে এইচ টি এম এল এর জন্য যে কোডটি আছে সেটি আমি কপি করে আমার কোডে বসিয়ে দিব। আমি পরপর কয়েকটি আইকন ব্যবহার করেছি বুঝার সুবিধার জন্য। কোডটি রান করার পরে ওয়েব সাইটে সেই আইকন গুলো চলে এসেছে দেখুন।

আইকন ব্যবহার করার আরেকটি খুবই পপুলার একটি সাইটের নাম Bootstrap Icons গুগলে সার্চ দিলেই এই সাইট আমরা পেয়ে যাব। কিভাবে Bootstrap Icons গুলো নিজের কোডে ব্যবহার করে ওয়েব সাইটে শো করানো যায় তা আমি ধাপে ধাপে এখন বর্ণনা করছি।

• প্রথমে গুগলে সার্চ দিয়ে Bootstrap Icons এর ওয়েব সাইটে যেতে হবে।

• এর করার পর নিচের স্কিন শর্ট এর মতো একটি ইন্টারফেস আসবে। এখানে আইকন এ ক্লিক করতে হবে।

• এরপর ইন্সটল এ ক্লিক করতে হবে।

• এবার CDN এর অংশ থেকে লিংক এর মধ্যে থাকা কোডটি কপি করে আমাদের লোকাল মেশিনে করা ওয়েব কোডের হেড সেকশন এর ভিতরে বসিয়ে দিতে হবে।

• এবার আইকন এড করার জন্য আপনি যে ধরনের আইকন চাচ্ছেন তা পাওয়ার জন্য আইকন এর উপর ক্লিক করলেই অনেক আইকন চলে আসবে। এগুলোর জন্য স্পেছিফিক কোড আছে যেগুলো আপনাকে আপনার কোডে এড করতে হবে তা না হলে আইকনটি শো করবে না। আমি আই-ফোনের একটি আইকন এড করতে চাচ্ছি। এজন্য আইকনটি সার্চ দিলাম পছন্দমতো একটি আইকন সিলেক্ট করে তার উপরে ক্লিক করলে নিচের মতো একটি ইন্টারফেস দেখাবে। এখান থেকে এই আইকনের জন্য যে কোডটি আছে সেটি আমি কপি করে আমার কোডে বসিয়ে দিব। আমি পরপর কয়েকটি আইকন ব্যবহার করেছি বুঝার সুবিধার জন্য। কোডটি রান করার পরে ওয়েব সাইটে সেই আইকন গুলো চলে এসেছে দেখুন।

HTML এ লিস্ট বলতে আমরা দুই ধরনের জিনিসকে বুঝি। একটি হচ্ছে unordered lists অন্যটি হচ্ছে ordered lists এই দুই ধরনের লিস্ট আইটেম নিয়ে আমি আমার HTML পর্বে আলোচনা করেছি। উপরে HTML এর পর্বগুলোর লিংক দেয়া আছে তা থেকে আপনারা দেখে নিতে পারেন। মনে করিয়ে দেয়ার জন্য কিছু কোড আমি নিচে দেখাচ্ছি।

Html Lists

<h1>ordered list</h1>
<ol>
<li>Html</li>
<li>CSS</li>
<li>Javascript</li>
<li>React</li>
</ol> <hr>

<h1>Unordered list</h1>
<ul>
<li>Html</li>
<li>CSS</li>
<li>Javascript</li>
<li>React</li>
</ul>

আমরা সাধারণত যখন কোন লিস্ট আইটেম তৈরী করি তখন দুইটি ডিফল্ট লিস্ট আইটেম মার্কার আমরা দেখতে পারি। অর্থাৎ ordered lists এর আইটেমগুলোর পাশে নাম্বার টাইপের মার্কার (1,2,3 ) < b>Unordered lists এর আইটেমগুলোর পাশে ছোট গোল ভরাট বৃত্ত দেখতে পারি। Css এর list-style-type প্রপার্টি ব্যবহার করে এগুলো চেঞ্জ করা যায়। নিচে ordered lists এবং < b>Unordered lists এর জন্য Css এর list-style-type প্রপার্টি ব্যবহার করে আমি কোড দেখাচ্ছি।

Css part

<style>
ul.one {
list-style-type: circle;
}
ul.two {
list-style-type: square;
}
ol.three {
list-style-type: upper-roman;
}
ol.four {
list-style-type: lower-alpha;
}
</style>

    <h4>Html part</h4>

<ul class="one">
<li>Html</li>
<li>CSS</li>
<li>Javascript</li>
</ul>

<ul class="two">
<li>Html</li>
<li>CSS</li>
<li>Javascript</li>
</ul>

<p>Example of ordered lists:</p>
<ol class="three">
<li>Html</li>
<li>CSS</li>
<li>Javascript</li>
</ol>

<ol class="four">
<li>Html</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
</ul>

CSS দিয়ে আমরা লিস্ট আইটেম এর বিভিন্ন কালারও এড করতে পারি। নিচের কোডটি লক্ষ্য করুন।

Css part

<style>
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}
</style>

Html part

<ol>
<li>Html</li>
<li>CSS</li>
<li>Php</li>
</ol>

<ul>
<li>Html</li>
<li>CSS</li>
<li>Php</li>
</ul>

আজ এখানেই শেষ করছি। আগামিকাল CSS এর অন্য টপিক্স নিয়ে লেখার চেষ্টা করবো। ভালো থাকবেন সবাই। আল্লাহ হাফেজ।