কেমন আছেন সবাই, আশা করছি সবাই ভালো আছেন। এত দিনে আমি আপনাদেরকে 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 নামে সেভ করেছি কারন এটিকে আমদের পরবর্তিতে লিঙ্ক এর জন্য ব্যবহার করতে হবে।
এখন আবার একটি নোটপ্যাড নিয়ে নিম্নের কোডটি টাইপ করুন।
<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>
এবার এটিকে আপনি যেকোন একটি নামে .html এক্সটেনশন দিয়ে সেভ করুন। আমি ফাইলটিকে external_style.html নামে সেভ করেছি। আপনারাও চাইলে করতে পারবেন। এখানে একটা বিষয় খেয়াল রাখবেন তা হল আপনার সিএসএস ফাইল আর এই ফাইলটি যেন একই ফোল্ডারে থাকে। এবার আপনি আপনার এইচটিএমএল ফাইলটিকে যেকোন একটি ফোল্ডারে ওপেন করুন। আশা করছি সম্পূর্ণ বিষয়টি পরিষ্কার বুঝতে পেরেছেন।
পরবর্তি পর্ব গুলোতে আমি উদাহরণ সহ প্রত্যেকটি বিষয় আলাদা আলাদা ভাবে দেখানোর চেষ্টা করব। আজ তাহলে এ পর্যন্তই সবাই ভালো থাকবেন।
আমি মুন্সী বরকতুল্লাহ জনি। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 3 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 10 টি টিউন ও 6 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
![ওয়েব ডিজাইন এর হাতেখড়ি [পর্ব-০৫] :: এইচটিএমএল টেবিল](https://dnc.techtunes.io/tDrive/tuner/munsi2207/244629/560405_477597472287351_937991953_n1.jpg "ওয়েব ডিজাইন এর হাতেখড়ি [পর্ব-০৫] :: এইচটিএমএল টেবিল")
![ওয়েব ডিজাইন এর হাতেখড়ি [পর্ব-০৭] :: এইচটিএমএল ফর্ম এবং ডিভ ট্যাগ এর ব্যবহার](https://dnc.techtunes.io/tDrive/tuner/munsi2207/247029/560405_477597472287351_937991953_n.jpg "ওয়েব ডিজাইন এর হাতেখড়ি [পর্ব-০৭] :: এইচটিএমএল ফর্ম এবং ডিভ ট্যাগ এর ব্যবহার")
![ওয়েব ডিজাইন এর হাতেখড়ি [পর্ব-০৪] :: এইচটিএমএল লিস্ট এবং লিংক](https://dnc.techtunes.io/tDrive/tuner/munsi2207/240983/560405_477597472287351_937991953_n.jpg "ওয়েব ডিজাইন এর হাতেখড়ি [পর্ব-০৪] :: এইচটিএমএল লিস্ট এবং লিংক")
![ওয়েব ডিজাইন এর হাতেখড়ি [পর্ব-০১] :: সাধারণ আলোচনা এবং ট্যাগ পরিচিতি](https://dnc.techtunes.io/tDrive/tuner/munsi2207/236780/560405_477597472287351_937991953_n1.jpg "ওয়েব ডিজাইন এর হাতেখড়ি [পর্ব-০১] :: সাধারণ আলোচনা এবং ট্যাগ পরিচিতি")
ভালো হচ্ছে চালিয়ে যান। মাঝ পথে আবার থামায় দিয়েন না তাহলে আমার আর ওয়েব ডিজাইন শেখা হবে না। আশা করব Advance Lavel তক নিয়ে যাবেন। ধন্যবাদ