গত পর্বে আপনাদের বলেছিলাম এই পর্বে আমরা 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 : white ; }
< /style>
< / head>
< body>
< p > It’s Show now: Text Color Is Red & Background Color Is white! < /p >
< / body>
< / html>
উপরোক্ত কোডটি ফলাফল দেখতে ঠিক এরকমঃ
উপরের কোডটি দেখে নিশ্চয়ই বুঝতে পারছেন HTML Code এর মতো CSS Code লেখা হয় না। সুতরাং, সিএসএস এইচটিএমএল কোড থেকে আলাদা।
আবারও একটু ভালো করে উপরের কোডগূলো খেয়াল করুন। দেখবেন, আমি HTML এর < body> ও < p> ট্যাগটি পরিবর্তন করেছি সিএসএস কোডের মাধ্যমে। কি? বুঝতে পারছেন না? ঠিক ধরেছি তাই না? ঠিক আছে, বুঝিয়ে দিচ্ছি।