ওয়েব পেইজ স্টাইল করার জন্য আমরা CSS (Cascading Style Sheet) ব্যবহার করে থাকি। ৩ টি উপায়ে এই CSS এ্যাপ্লাই করা যায়। সেগুলো হলোঃ

  • Inline CSS
  • Internal CSS
  • External CSS

এই ৩ টিই আমাদের জন্য একই আউটপুট দেখায় কিন্তু আমরা ভিন্ন ভিন্ন পরিস্থিতির জন্য ভিন্ন ভিন্ন ধরণ ব্যবহার করে থাকি।

খুব সহজেই ক্ষুদ্র একটি অংশের উপর স্টাইল প্রয়োগ করার জন্য Inline CSS ভালো, কিন্তু যখন কোড অনেক বড় হয়ে যাবে তখন Inline CSS মেইনটেইন করা অসুবিধা হয়ে যায়।

Internal CSS ব্যবহার করা হয় নির্দিষ্ট একটি পেইজ স্টাইল করার জন্য। অর্থাৎ ভিন্ন ভিন্ন HTML পেইজের জন্য ভিন্ন ভিন্ন Internal CSS.

কিন্তু HTML পেইজের সংখ্যা যখন বেড়ে যাবে তখন Internal CSS কিছু সমস্যার কারন হয়ে দাড়ায়। এই সমস্যাগুলোই সমাধান করার জন্য চলে আসে External CSS. এই ধরনের CSS লেখার সুবিধা হলো একটি Style Code একাধিক HTML পেইজে প্রয়োগ করা যায়।

CSS লিখা শুরু করার আগে আমাদের আরেকটি কনসেপ্ট বুঝতে হবে। সেটি হলো “Selector”. নাম শুনেই বুঝা যাচ্ছে Select অথবা চিহ্নিত করার মতো কিছু ব্যাপার আছে এখানে।

CSS এ আমরা যার উপর স্টাইল এ্যাপ্লাই করবো সেটাই সিলেক্টর। HTML টেমপ্লেটে যে ইলিমেন্ট কে আমরা স্টাইল করতে চাচ্ছি তাকে সিলেক্ট করে CSS লেখা শুরু করতে হয়। আর এজন্যই একে বলে CSS Selector

এখানে আমরা <p> ট্যাগের ভিতরের লেখাগুলোর ফন্ট সাইজ লিখে দিচ্ছি। এজন্য প্রথমেই selector define করে দিতে হয়েছে। এরপর শুরু হওয়া Curly braces এর ভিতরের অংশটুকুতে CSS Declaration করা হয়েছে।

আরেকটি উদাহরণঃ

CSS Selector সম্পর্কে আরো জানতেঃ https://www.internetingishard.com/html-and-css/css-selectors/

৫ ভাবে আমরা CSS Selector লিখতে পারি। সেগুলো হলোঃ

  • Element Selector
  • Class Selector
  • ID Selector
  • Attribute Selector
  • Universal Selector

৩ রকম CSS লেখার ধরন এবং ৫ রকম সিলেক্টর সম্পর্কে জানলাম। এবার CSS Syntax সম্পর্কে জানা যাক।

সিলেক্টর CSS Syntax এর একটি গুরুত্বপূর্ণ অংশ। এরপর বাকী টুকু হলো curly-braces এর ভিতরে প্রয়োজন মতো property এবং value লেখা।

আরো কিছু উদাহরণঃ

CSS Selector এ ভালো হতে হলে HTML Element Tree সম্পর্ক নিখুত ধারনা থাকতে হবে। এজন্য একটি HTML Element Tree দেয়া হলোঃ

পুরো ব্লগটি পড়ার পর যারা ভাবছেন HTML, CSS এ জিনিসগুলো কি? ওয়েব ডেভেলপমেন্টে এগুলো কি কাজে আসে। তাদের জন্য সহজ ভাষায় বলতে গেলেঃ

HTML আমাদের User Interface এর একটি কাঠামো দেয়, অন্যদিকে সেই কাঠামোকে ভিন্ন ভিন্ন ভাবে সাজাতে CSS দরকার হয়। অর্থাৎ ডিজাইন করাই CSS এর কাজ।

সৃষ্টিকর্তা আমাদের সবাইকেই একটি কাঠামোতে তৈরী করেছে। এরপর ভিন্ন ভিন্ন অবয়বে সাজিয়েছেন আমাদের।


4 Comments

Abdullah Al Amin · October 7, 2020 at 3:18 pm

Informative
well done bro… carry on

Motalib Hossain · October 8, 2020 at 1:16 pm

Awesome post vai …onnek valo laglo

Atiqur Rahman · October 15, 2020 at 3:21 pm

valo legece vaiya

Rejoan Islam · October 19, 2020 at 2:50 pm

Erokom aro chai vai. onek kicu easily sikhe fellam <3

Leave a Reply

Your email address will not be published. Required fields are marked *