Css কি ? কেন করবেন? কি ভাবে করবেন ?
Post No:10
আসসালামুয়ালাইকুম আশা করি সবাই অনেক ভালো আছেন বেশ কয়েকদিন আমি নিয়মিত পোস্ট দিতে পারি নাই তার কারণ টা হচ্ছে আমি ভেড়ামারা আবাসিক স্টুডেন্টদের সাথে শিফট হইছে। আশা করছি এখন থেকে প্রতিদিনই আমার ব্লগ পোস্ট আপনারা পাবেন ।
গত পোস্ট গুলাতে আমি Html এর অংশ টুকু কভার করছি আজকে থেকে Css নিয়ে লিখালেখি করবো।
আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:
hashnode.com/@Labib
CSS কি?
Css (Cascading Stylesheet). ক্যাসকেডিং স্টাইল শীট হল একটি স্টাইল শীট ভাষা যা এইচটিএমএল-এর মতো মার্কআপ ভাষায় লেখা একটি নথির উপস্থাপনা বর্ণনা করার জন্য ব্যবহৃত হয়। CSS হল HTML এবং JavaScript এর পাশাপাশি ওয়ার্ল্ড ওয়াইড ওয়েবের একটি ভিত্তিপ্রস্তর প্রযুক্তি।
সিএসএস কিভাবে কাজ করে?
একটি স্টাইলিং ভাষা হিসাবে, সিএসএস নির্দিষ্ট করে কিভাবে ব্যবহারকারীরা নথিগুলিকে লেআউট থেকে শৈলী পর্যন্ত দেখেন। প্রভাবিত নথিগুলি সাধারণত টেক্সট ফাইল যা একটি মার্কআপ ভাষা থেকে গঠন পায়, যার মধ্যে সবচেয়ে সাধারণ হল HTML। এখন আমরা দেখব কিভাবে একটি ব্রাউজার CSS এবং HTML নেয় এবং একটি ওয়েবপেজে পরিণত করে।
এখন আমরা দেখবো কিভাবে এইচটিএমএল টট্যাগকে সিএসএস দিয়ে ডিসাইন করা হয়। সিএসএস দিয়ে ডিজাইন করা খুবই সহজ আপনারা দেখলেই বুঝতে পারবেন। চলুন এখন আমরা ডিজাইন করি।
এখানে HTML ⇓
এখানে Output Result ⇓:
চলুন এখন আমরা এই ট্যাগ গুলোকে ধরে ধরে সিএসএস করি সিএসএস এর অনেক এট্রিবিউট আছে এই এট্রিবিউট গুলো দিয়ে সিএসএসকে ডিজাইন করা হয়। এতেকরে ওয়েবসাইটটি অনেক সুন্দর দেখায়। চলুন আমরা দেখি-
এখানে HTML and CSS ⇓
নিচে লক্ষ্য করুন এইচটিএমএল ফাইল এ হেডিং ট্যাগ-এর ভিতরে টাইটেল ট্যাগ-এর নিচে স্টাইল ট্যাগ-এর ভিতরে কিছু সিএসএস কোড করা হয়েছে কালার ২০ পিক্সেল, ব্যাকগ্রাউন্ড-কালার গ্রীন, টেক্সট-এলাইন সেন্টার, ফন্ট-সাইজ ৫০ পিক্সেল দেয়া হয়েছে এগুলোই সিএসএস। কালার, ব্যাকগ্রাউন্ড -কালার, টেক্সট-এলাইন, ফন্ট-সাইজও এগুলোকে সিএসএস প্রপার্টি বলে। এরকম আরো অনেক প্রোপের্ট আছে। যা দিয়ে আমরা সুন্দর করে ডিজাইন করতে পারি।
Scroll Down ⇓
এখানে Html ফাইল এ হেডিং ট্যাগ-এর ভিতর <style></style> ট্যাগ-এর ভিতর কিছু CSS প্রপার্টি ব্যবহার করা হয়েছে। ⇓
এখানে HTML and CSS Result Show ⇓
আমি এইচটিএমএল ফাইল এ স্টাইল ট্যাগ-এর ভিতর H1 ট্যাগকে ধরে কিছু সিএসএস প্রপার্টি ব্যবহার করছি। কালার, ব্যাকগ্রাউন্ড-কালার, ফন্ট-সাইজ, এন্ড টেক্সট-এলাইন এগুলো সব সিএসএস প্রপার্টি। সিএসএস-এর প্রপার্টি ফিক্সড থাকে মানে আপনি নিজের মতো করে প্রপার্টি তৈরি করে ব্যবহার করতে পারবেন না তবে প্রপার্টিটির ভ্যালু আমরা মনমতো ব্যবহার করতে পারবো। যেমন- কালার প্রপার্টিটির ভ্যালু আমরা রেড, গ্রীন, বুলু যেকোনো একটি ব্যবহার করতে পারি। সেম ব্যাকগ্রাউন্ড-কালার, ফন্ট-সাইজ 20পিক্সেল 10পিক্সেল 50পিক্সেল দিতে পারি, টেক্সট-এলাইন -এর ভ্যালু ৩টাই আছে লেফট, রাইট, সেন্টার।
আমি শুধু H1 ট্যাগকে ধরে ডিজাইন করেছি ১টা ওয়েবসাইট-এ এরকম অনেক এইচটিএমএল ট্যাগ থাকতে পারে, সব ট্যাগ-এর ডিজাইন তো আমার সেম না লাগতেও পারে মানে আমি যাচ্ছি আমি আরো H1 ট্যাগ নেবো কিন্তু ডিজাইন ভিন্ন হবে। চলুন আমরা দেখি কিভাবে করা যায় -
লক্ষ্য করুন আমি HTML-এ H1 ট্যাগ আরো নিয়েছি কিন্তু স্টাইল ১বার করছি। কিন্তু সব h1 ট্যাগ এ সেম ডিজাইন হয়েছে ⇓
Scroll Down ⇓
এখানে Output Result দেখুন ⇓
আমার সেম ডিজাইন আসছে। আসার কথায় কারণ আমি তো সেম ট্যাগ নিয়েছি, সব h1 ট্যাগ-এর উপর এপলাই হয়েছে ।
প্রশ্ন: এর সমাধা কি?
Ans: একই ক্লাসে সাজ্জাদ নামে অনেকেই থাকতে পারে তখন আমরা চেনার ক্ষেত্রে ১তা সাব নাম দিয়ে তাদের ডাকি। ঠিক তেমনি আমরা এখন সাব নাম দেব।
প্রশ্ন: এইটা তো ট্যাগ সাবনাম কিভাবে দেব?
Ans: সিএসএস-এ আমরা ক্লাস দিয়ে সাবনাম দেব, তবে কিছু নিয়ম আছে যেমন ক্লাস নাম আমরা যা দেব সেই নামের মাঝে কোনো স্পেস দেয়া যাবে না। স্পেস দিলে তখন ২টা নাম হবে। ক্লাস নামে যদি ২টা ওয়ার্ড থাকে সেক্ষত্রে আমরা হাইফেন, উন্ডারস্ক্রোর, অথবা ক্যামেলকেস দিয়ে ব্যবহার করতে পারি
এখন আমরা লাইভ দেখবো।
Scroll Down ⇓
লক্ষ্য করুন আমি HTML-এ H1 ট্যাগ এ ক্লাস এট্রিবিউট নিয়েছি এবং ক্লাস নাম দিয়েছি "heading-tag" শুধু h1 কে ধরে ডিজাইন করলে আমার html ফাইল-এর সকল ট্যাগ-এর উপর সিএসএস এপলাই হবে। যদি আমি ক্লাস নাম বা সাবনাম দিয়ে ধরি তখন ওই সাবনাম যে ট্যাগ-এ থাকবে শুধু ওই ট্যাগ-এর উপর সিএসএস এপলাই হবে। চলুন দেখে নেই।
লক্ষ্য করুন এখানে কিন্তু সিম ডিজাইন আছে। সাবনাম দেয়াতে আমাদের কোনো পরিবর্তন আসে নাই। Output Result দেখুন ⇓
উপরে লক্ষ্য করুন ক্লাস নাম নেয়ায় আমাদের কোনো পরিবর্তন আসে নি। আর এভাবে আসবেও না।
তাহলে কিভাবে আমি HTML ট্যাগ এ ক্লাস নিয়ে ডিজাইন চেঞ্জ করবো ?
নিচে লক্ষ্য করুন আমরা <style></style> -এর ভিতর h1 ট্যাগ নিয়ে {} সেকেন্ড ব্রাকেট -এর ভিতর সিএসএস প্রপার্টি নিয়েছি। এখানে h1 হচ্ছে সিলেক্টর। সিএসএস-এ সিলেক্টর মোস্ট ইম্পরট্যান্ট। আপনি যে ট্যাগকে ডিজাইন করতে চাচ্ছেন তাকে সিলেক্টর-এর মাদ্ধমে আগে সিলেক্ট করতে হবে তারপর সিএসএস প্রপার্টি এপলাই করলে ওই ট্যাগ-এ সিএসএস কাজ করবে এন্ড আউটপুট এ আমরা রেজাল্ট দেখতে পাবো। সিএসএস ৩টাইপ এক্সটার্নাল, ইন্টারনাল, এন্ড ইনলিনে সিএসএস। আমরা যে সিএসএস করেছি এটাকে ইন্টারনাল সিএসএস বলে।
আমরা এইচটিএমএল-এ ক্লাস নিয়েছি এই ক্লাস কে সিএসএস-এর ভাষায় বলে ডট (.), ডট মিন এইচটিএমএল ক্লাস। চলুন আমরা ডট দিয়ে ধরে সিএসএস প্রপার্টি এপলাই করবো।
ইমেজটি লক্ষ্য করুন ⇓
উপরে আমি <style></style> ট্যাগ-এর ভিতর h1 এর জায়গায় ক্লাস নাম "সরবিন্দু" দিয়েছি।
Output Result দেখেন ⇓
এখানে আমার এইচটিএমএল ফাইল-এর স্পেসিফিক শুধু ১টি ট্যাগ ওই ডিজাইন হয়েছে। কারণ আমি শুধু ১টি ট্যাগ-কেই ডিজাইন করেছি। এভাবে আমরা আমাদের মন মতো সকল এইচটিএমএল ট্যাগকে সিএসএস দিয়ে ডিজাইন করতে পারবো। নেক্সট এ আমরা আরো দেখবো.........
The End
