সবাইকে আন্তরিক প্রীতি ও শুভেচ্ছা জানিয়ে শুরু করছি আমার সিএসএস নিয়ে ধারাবাহিক টিউন: CSS শিখুন [পর্ব ৩].
গত পর্বে আপনাদের বলেছিলাম এই পর্বে আমরা CSS লেখার যে তিনটি সিস্টেম আছে (Internal, External এবং Inline) সে সব বিষয় নিয়ে আলোচনা করবো। তারই ধারাবাহিকতায় আজকে আমি শুধামত্র Internal নিয়েই আলোচনা করবো। তো চলুন, শুরু করা যাক।
Internal কি?
Internal হচ্ছে সিএসএস লেখার এক ধরনের সিস্টেম। ইন্টারনাল ভালভাবে বুঝতে হলে আপনাকে পুরো টিউনটি আগে বুঝতে হবে। Internal CSS ব্যবহার করতে হলে প্রথমে আমাদেরকে একটা নতুন ট্যাগ যোগ করতে হবে। সেই নতুন ট্যাগটি হচ্ছে <style> tag আর এই <style> tag টি মূলত HTML <head> tag এর অধীনে রাখতে হবে। উদাহরণস্বরূপ নিচের কোডগুলো দেখনুঃ
<html><head><style></style></head><body><p>This is My First CSS Code</p></body></html>
এখন যদি আপনি ওয়েব পেজ এ Preview দেখতে চান তবে আপনি কিছুই দেখতে পারবেন না! কারণ, ওই যে বললাম, <style> tag টি মূলত HTML tag এর এর অধীনে রাখতে হবে। আর এই <style> tag টি দেয়ার মানে হচ্ছে যে আপনি এই পেজ এ কিছু সিএসএস এলিমেন্টস যুক্ত করতে চান। তারমানে, এখন আমরা আমাদের পেজটিকে বলে দিয়েছি যে আমরা এখন কিছু সিএসএস কোড যুক্ত করব, তাই না? তাহলে, চলুন আমরা এবার ইন্টারনাল সিএসএস কোড তৈরী করি।
Create Internal CSS Code (ইন্টারনাল সিএসএস কোড তৈরী)ঃ
অনুগ্রহপূর্বক নিচের কোডটি ভালভাবে খেয়াল করুন। পরে ব্যাখ্যা দিচ্ছি।
<html>
<head>
<style>
p {color: Red; }
body {background-color: Yellow; }
</style>
</head>
<body>
<p>It's Show now: Text Color Is Red & Background Color Is Yellow!</p>
</body>
</html>
উপরোক্ত কোডটি ফলাফল দেখতে ঠিক এরকমঃ
উপরের কোডটি দেখে নিশ্চয়ই বুঝতে পারছেন HTML Code এর মতো CSS Code লেখা হয় না। সুতরাং, সিএসএস এইচটিএমএল কোড থেকে আলাদা।
আবারও একটু ভালো করে উপরের কোডগূলো খেয়াল করুন। দেখবেন, আমি HTML এর <body> ও <p> ট্যাগটি পরিবর্তন করেছি সিএসএস কোডের মাধ্যমে। কি? বুঝতে পারছেন না? ঠিক ধরেছি তাই না? ঠিক আছে, বুঝিয়ে দিচ্ছি।
Generally CSS Format:
"HTML tag" { "CSS Property" : "Value" ; }
১. প্রথমে আমি এইচটিএমএল p { : ; } এই এ্যালিমেন্টসটাকে বাছাই করেছি আমার কাজ শুরু করার জন্য।
২. তারপর আমি সিএসএস Attribute এর color নির্বাচন করেছি p { color: ; }
৩. আমরা জানি, আগের পর্ব গুলোতে পড়েছিলাম Property ও Value এর কথা ২ নং ব্যাখ্যায় আমি property হিসেবে color কে ব্যবহার করেছি আর এখন Value হিসাবে ব্যবহার করলাম ফন্টের কালার Red। এখন আমার কোড দাড়াল p { color: Red; }
৪. উপরের কোডটির কারণে আমার এইচটিএমএল প্যারাগ্রাফের অধীনে সমস্ত লেখা লাল হয়ে গেলো।
৫. এরপর আমি আরেকটি এইচটিএমল এলিমেন্টস সিলেক্ট করলাম: body { : ; } এই এ্যালিমেন্টসটি।
৬. তারপর আমি সিএসএস Attribute এর Background_color নির্বাচন করেছি body { background-color: ; }
7. এরপর আমি সিএসএস Attribute এর Background_color এর রং নির্বাচন করেছি body { background-color: Yellow; }
সুতরাং, ফলাফল হিসেবে আমাকে উপরোক্ত ইমেজটিই দেখাবে।