ওয়েব ডিজাইনিং এর শুরু থেকে শুরু- ৭ম পর্ব

আসসালামু আলাইকুম। কেমন আছেন আপনারা সকলে। আশা করি ভালো আছেন। আল্লাহর রহমতে আমি ভালো আছি। বেশ কিছু দিন অসুস্থ এবং কিছু ছোট-খাট কাজে ব্যস্ত থাকার কারণে আর কোন টিউন দিতে পারিনি ওয়েব ডিজাইন এর উপর। সেজন্য আমি আপনাদের সকলের কাছে ক্ষমা চাইছি, আশা করি আমাকে ক্ষমা করে দেবেন।

তো আসুন আমাদের আসল কাজে আসি। তার আগে আবার বলে নিচ্ছি আপনার যারা আগের টিউন গুলো না পড়ে এই টিউনটি পড়ছেন তারা দয়া করে আগের টিউন গুলো পড়ে তারপর এই টিউনটি পড়বেন।

আগের টিউন গুলোঃ

১ম পর্ব
২য় পর্ব
৩য় পর্ব
৪র্থ পর্ব
৫ম পর্ব
৬ষ্ঠ পর্ব

আমরা ইতি মধ্যেই সিএসএস কি তা জেনেছি। আজ আমরা সিএসএস সম্পর্কে জানব।

সিএসএস এ মাধ্যমে এইচটিএমএল এর রূপ পরিবর্তন করার জন্য সিএসএস এ

তিনটি কাজ করতে হবে।

১। Selector

২।Property

৩। Value

সিএসএস দিয়ে আমদের ওয়েব সাইট সাজানোর আগে এইচটিএমএল এর ট্যাগ কে সিএসএস-এ কল বা ডাকতে হবে।

যেমন ধরুন আপনি আপনার ঘরের রং করবেন। তো আপনি রং-এর কোঁটা এনে ঢেলে দিলেই হবে না। তার জন্য আপনাকে বিভিন্ন সাইজের ব্রাশ আনতে হবে। কারন ঘরের সকল জাইগা সমান না। আপনাকে যেমন বিভিন্ন সাইজের ব্রাশ আনতে হবে ঘরের রং করার জন্য ঠিক তেমনি সিএসএস এর ক্ষেত্রে হল আপনাকে এইচটিএমএল এর কোড কে কল দিতে হবে বা ডাক দিতে হবে। এই কল বা ডাক দেওয়ার নাই হল "Selector"

"Property" এইচটিএমএল এর ট্যাগ যেটিকে আপনি সিএসএস এ কল করেছেন তাকে কোন কিছু করার জন্য বলা। যেমন আপনি যদি একটি "p" ট্যাগ সিলেক্ট করে তাকে যদি তার নিজের রং বদলাতে বলেন তাহলে এই রং বদলানোর কথাটাই হল প্রপার্টি।

আপনি "p" ট্যাগটিকে তো রং বদলাতে বলেছেন কিন্তু এটা এখনও বলেননি যে সে কি রং এ পরিবরতিত হবে। আপনি যদি তাকে নির্দিষ্ট কোনো রং এ পরিবর্তন হতে বলেন তাহলে সেই নির্দিষ্ট রং এর নামটাই হল "Value".

সিএসএস এ এইচটিএমএল এর ট্যাগ কল করার পদ্ধতি দেখানো হল।

Selector: সিলেক্টর এর জন্য বিশেষ কিছু করতে হয় না। শুধু যাকে আপনি সিলেক্ট করতে চান তার নামটা লিখে দিন ব্যস। কিন্তু এর মধ্যে কিছু কথা রয়েছে। ধরুন আপনি "p" কে সিলেক্ট করে তার রং পরিবর্তন করে দিলেন। কিন্তু আপনার ওয়েব সাইটটিতে যত "p" রয়েছে সবগুলোর রং পরিবর্তন হয়ে যাবে। সেজন্য আপনি id অথবা class দিয়ে তার একটা নাম দেন এবং এই নামটা সিএসএস এ কল দিয়ে তার রং পরিবর্তন করেন তাহলে শুধু মাত্র সেই "p"র ই রং পরিবর্তিত হবে আর বাকীগুলোর কোন প্রকার পরিবর্তন সাধন হবে না।

Id selector: আইডি কে সিএসএস এ সিলেক্ট করার জন্য "#" এই চিহ্নটি ব্যবহার করা হয়।

Class selector: ক্লাস কে সিএসএস এ সিলেক্ট করার জন্য "." এই চিহ্নটি ব্যবহার করা হয়।

আজ এই পর্যন্ত, আগামি পর্বে আমরা জানব সিএসএস এ কি কি প্রপার্টি রয়েছে এবং তাদের কি কি ভেলু রয়েছে।

যেকোন প্রকার সাহায্যের জন্য আমার সাথে যোগাযোগ করতে পারেন।

ফেসবুক
ব্লগ সাইট

Level 2

আমি মোহাম্মদ রিয়াদ। Front-end Designer and WP Developer, Soft Bucket, Chattogram। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 7 বছর 2 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 23 টি টিউন ও 14 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 4 টিউনারকে ফলো করি।

I'm a front-end designer and WordPress Developer. I've been working as a front-end design since 2015 and as a WordPress Developer since 2018. I've intermediate skills in Graphics Design and Digital Marketing.


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

ভাই টিউনমেন্টে লিংক কিভাবে দিতে হয় জানালে খুশি হতাম।

আপনার প্রতিটা টিউন ভাল করে পড়লাম । একটা বিষয় বুজতে পারছি না। তৃতীয় পর্বের UTF-8 টা কি ?

ভাল লাগছে।চালিয়ে যান ভাই

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