CSS শিখুন [পর্ব-৩]

সবাইকে আন্তরিক প্রীতি ও শুভেচ্ছা জানিয়ে শুরু করছি আমার সিএসএস নিয়ে ধারাবাহিক টিউন: CSS শিখুন [পর্ব ৩].
গত পর্বে আপনাদের বলেছিলাম এই পর্বে আমরা CSS লেখার যে তিনটি সিস্টেম আছে (Internal, External এবং Inline) সে সব বিষয় নিয়ে আলোচনা করবো। তারই ধারাবাহিকতায় আজকে আমি শুধামত্র Internal নিয়েই আলোচনা করবো। তো চলুন, শুরু করা যাক।

Internal কি?

Internal হচ্ছে সিএসএস লেখার এক ধরনের সিস্টেম। ইন্টারনাল ভালভাবে বুঝতে হলে আপনাকে পুরো টিউনটি আগে বুঝতে হবে। Internal CSS ব্যবহার করতে হলে প্রথমে আমাদেরকে একটা নতুন ট্যাগ যোগ করতে হবে। সেই নতুন ট্যাগটি হচ্ছে This is My First CSS Codeএখন যদি আপনি ওয়েব পেজ এ Preview দেখতে চান তবে আপনি কিছুই দেখতে পারবেন না! কারণ, ওই যে বললাম, It’s Show now: Text Color Is Red & Background Color Is Yellow!উপরোক্ত কোডটি ফলাফল দেখতে ঠিক এরকমঃউপরের কোডটি দেখে নিশ্চয়ই বুঝতে পারছেন HTML Code এর মতো CSS Code লেখা হয় না। সুতরাং, সিএসএস এইচটিএমএল কোড থেকে আলাদা।আবারও একটু ভালো করে উপরের কোডগূলো খেয়াল করুন। দেখবেন, আমি HTML এর ও ট্যাগটি পরিবর্তন করেছি সিএসএস কোডের মাধ্যমে। কি? বুঝতে পারছেন না? ঠিক ধরেছি তাই না? ঠিক আছে, বুঝিয়ে দিচ্ছি।

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; }সুতরাং, ফলাফল হিসেবে আমাকে উপরোক্ত ইমেজটিই দেখাবে।

Note: অনেক সময় দেখা যায় আমরা অনেক কষ্ট করে কোড লিখলাম কিন্তু সেটা আউটপুট দিচ্ছে না। সেক্ষেত্রে না ঘাবড়িয়ে খেয়াল করুন আপনি সিএসএস অ্যাট্রিবিউট এর পর কোলন (:) এবং সিএসএস অ্যাট্রিবিউট এর Value-র পর সেমিকোলন ( ; ) দিয়েছেন কিনা? আর তারপরও যদি না আসে তবে খেয়াল করে দেখুন আপনি সিএসএস স্টাইল প্রয়োগ করেছেন কিনা?