ওয়েব ডিজাইন এর হাতেখড়ি [পর্ব-৯] :: সিএসএস নিয়ে প্রাথমিক আলোচনা
কেমন আছেন সবাই, আশা করছি সবাই ভালো আছেন। এত দিনে আমি আপনাদেরকে HTML সম্পর্কে ধারণা দিয়েছি। আজ থেকে আমরা সিএসএস এর ব্যবহার দেখব। এখানে আমি সিএসএস সম্পর্কে বেসিক কিছু আলোচনা উপস্থাপন করেছি। শুরুতেই জেনে নেওয়া যাক সিএসএস কি? একটি ওয়েবপেজকে বিভিন্ন দিক থেকে সুন্দর করে উপস্থাপন করার জন্য সিএসস ব্যবহার করা হয়। সিএসএস এর মানে হলো ক্যাসকেডিং স্টাইল শিট(CSS- Cascading Style Sheets)। সিএসএস এর সিনট্যাক্স তিনটি অংশ নিয়ে গঠিত।
১। সিলেক্টর(Selector)
২। প্রোপার্টি(Property)
৩। ভ্যালু(Value)
Selector {property: value}
সিলেক্টর হলো নির্দিষ্ট একটি ট্যাগ যেটি আপনি নির্বাচন করতে চান। প্রোপার্টি হচ্ছে অ্যাট্রিবিউট যেটাকে পরিবর্তন করা হয়। আর প্রত্যেকটি প্রোপার্টির একটি নির্দিষ্ট ভ্যালু থাকে। যেমনঃ
Body {color: red}
একাধিক ভ্যালুর ক্ষেত্রে ভ্যালু গুলোকে সেমিকোলন দিয়ে পৃথক করা হয়। যেমনঃ
P { text-align: left; color: green}
সিলেক্টর বিভিন্ন ধরণের হয়ে থাকে, যেমনঃ
- ইউনিভার্সাল সিলেক্টর
- আইডি সিলেক্টর
- ক্লাস সিলেক্টর
- টাইপ সিলেক্টর
- ডিসেনডেন্ট সিলেক্টর
একটি এইচটিএমএল ডকুমেন্ট এর সাথে তিন ভাবে স্টাইল শিট যুক্ত করা হয়। সেগুলো হলোঃ
১. এক্সটার্নাল স্টাইল শিট (Extarnal Style Sheet): একই স্টাইল অনেক গুলো পেজে ব্যবহারের ক্ষেত্রে এক্সটার্নাল স্টাইল শিট ব্যবহার করা হয়।
২. ইন্টারনাল স্টাইল শিট (Internal Style Sheet): কোন নির্দিষ্ট পেজে একক কোন স্টাইল প্রয়োগ এর ক্ষেত্রে ইন্টারনাল স্টাইল শিট ব্যবহার করা হয়।
৩. ইনলাইন স্টাইলস(Inline Styles): এটি হচ্ছে সিএসএস style ট্যাগকে HTML কোড এর ভিতর ব্যবহার করার নিয়ম।
HTML ডকুমেন্ট এর ভিতরে কিভাবে স্টাইল শিট ব্যবহার করা হয় তা এখন আমি আপনাদেরকে দেখানোর চেষ্টা করব। শুরুতেই চলুন দেখে নেওয়া যাক কিভাবে ইন্টারনাল স্টাইল শিট ব্যবহার করা হয়। ব্যবহার দেখার আগে কিছু কথা জেনে নেওয়া যাক। তা হল আমরা কখন কি ব্যবহার করব। মূল কথা হল আমাদের HTML ফাইল এ বিভিন্ন ডিজাইন ব্যবহার এর জন্য স্টাইল শিট ব্যবহার করি। এখন কথা হল কখন কোনটা ব্যবহার করলে ভাল হবে। ধরুন আপনি অনেকগুলো পেজ এর একটি ওয়েবসাইট তৈরি করতে যাচ্ছেন, এখন দেখা যেতে পারে আপনাকে অনেক গুলো ওয়েবপেজে একই ডিজাইন বারবার ব্যবহার করা লাগছে, সেক্ষেত্রে আপনার উচিত হবে এক্সটার্নাল স্টাইল শিট ব্যবহার করা। আবার ধরুন এমন একটি ডিজাইন যেটি কিনা শুধুমাত্র একটি পেজেই ব্যবহার করতে হবে সেক্ষেত্রে আপনার উচিত হবে ইন্টারনাল স্টাইল শিট ব্যবহার করা। এখন চলুন তাহলে দেখে নেওয়া যাক কিভাবে এক্সটার্নাল স্টাইল শিট এর ব্যবহার করা হয়। শুরুতে আপনাকে যা করতে হবে তা হচ্ছে আপনাকে একটি সিএসএস ফাইল তৈরি করতে হবে। একটি নোটপ্যাড ওপেন করে তাতে নিম্নের কোডটি লিখুন।
body {background-color: #99FF66}
h1 { font-size:24px; text-align:center;}
h2 { color:#0066FF}
p { margin-right:auto}
এবার এই ফাইলটিকে .css এক্সটেনশন দিয়ে সেভ করুন। আমি এখানে ফাইলটি style.css নামে সেভ করেছি কারন এটিকে আমদের পরবর্তিতে লিঙ্ক এর জন্য ব্যবহার করতে হবে।
এখন আবার একটি নোটপ্যাড নিয়ে নিম্নের কোডটি টাইপ করুন।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <html></pre><head><title>ABH World IT Academy </title><link rel="stylesheet" type="text/css" href="style.css"/></head><body><h1> ABH World IT Academy </h1><h2> This is a practice page of Extarnal Style Sheet </h2><p>
ABH World IT academy is a well structured and one of the best IT
academies of Bangladesh, which have a young & strong team. ABH World
IT academy also looks to make the young generation to be
self-dependent. ABH World IT Academy is ready to give them proper
guidance and help to build up their career in IT sector. </p></body></html><pre> |
পরবর্তি পর্ব গুলোতে আমি উদাহরণ সহ প্রত্যেকটি বিষয় আলাদা আলাদা ভাবে দেখানোর চেষ্টা করব। আজ তাহলে এ পর্যন্তই সবাই ভালো থাকবেন।
No comments:
Post a Comment