সবাইকে আন্তরিক প্রীতি ও শুভেচ্ছা জানিয়ে শুরু করছি আমার সিএসএস নিয়ে ধারাবাহিক টিউন: CSS শিখুন [পর্ব ৩].
গত পর্বে আপনাদের বলেছিলাম এই পর্বে আমরা CSS লেখার যে তিনটি সিস্টেম আছে (Internal, External এবং Inline) সে সব বিষয় নিয়ে আলোচনা করবো। তারই ধারাবাহিকতায় আজকে আমি শুধামত্র 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 টি দেয়ার মানে হচ্ছে যে আপনি এই পেজ এ কিছু সিএসএস এলিমেন্টস যুক্ত করতে চান। তারমানে, এখন আমরা আমাদের পেজটিকে বলে দিয়েছি যে আমরা এখন কিছু সিএসএস কোড যুক্ত করব, তাই না? তাহলে, চলুন আমরা এবার ইন্টারনাল সিএসএস কোড তৈরী করি।
অনুগ্রহপূর্বক নিচের কোডটি ভালভাবে খেয়াল করুন। পরে ব্যাখ্যা দিচ্ছি।
<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> ট্যাগটি পরিবর্তন করেছি সিএসএস কোডের মাধ্যমে। কি? বুঝতে পারছেন না? ঠিক ধরেছি তাই না? ঠিক আছে, বুঝিয়ে দিচ্ছি।
"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-র পর সেমিকোলন ( ; ) দিয়েছেন কিনা? আর তারপরও যদি না আসে তবে খেয়াল করে দেখুন আপনি সিএসএস স্টাইল প্রয়োগ করেছেন কিনা?
সবাইকে অসংখ্য ধন্যবাদ জানিয়ে আজকের মতো এখানেই শেষ করছি। আগামী পর্বে হাজির হবো CSS External নিয়ে। ততদিন পযর্ন্ত সবাই ভাল থাকবেন, সুস্থ থাকবেন, আর যে কোনো প্রকারের পরামর্শ সাদরে গ্রহণেযাগ্য। আর আমার একটা সাইট আছে ই-বুকের জন্য, যাদের বাংলায় বিভিন্ন লেখকের বই দরকার তারা একবার ঢু মেরে আসতে পারেন http://www.bdlibrary.ucoz.com
ধন্যবাদ।
আমি অচেনা বালক। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 13 বছর 3 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 46 টি টিউন ও 157 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
I am a simple Man.
ধন্যবাদ এগিয়ে যান।
আমি শিখছি আপনাদের কাছ থেকে।
পরবর্তী টিউনটি কবে প্রকাশ করবেন?আর কিছু ইবুক(বাংলা হলে ভালো ) এর লিঙ্ক দিলে উপকৃত হয়।
hello, could you please make tune content little bit more ? please try to cover little bit more in each tunes. abar boilen na, sobar capacity ek rokom na tai , boro kore dicchi na, je jototoko parbe se tototuko kore pore nibe,,, proyojone ekadhik bar kore pore nibe/nibo. atu kom kom kore ek ekta tune a content thakle,. CSS shikhaite shikahite e ek bocchor lege jabe mone hocceh, make it little fast bro. many thanks, to tune in a simple way…. good luck , following it.
![jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব](https://dnc.techtunes.io/tDrive/tuner/2018/04/techtunes_fee81aa370998cccf57ea2d7dc08eaa8-368x207.jpg "jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব")
ভাল হচ্ছে।চালিয়ে যান। 🙂