আসসালামু আলাইকুম। কেমন আছেন আপনারা সকলে। আশা করি ভালোই আছেন। আপনারা হয়তো ধারণা করেছেন আমি এইচটিএমএল শেষ করে হারায় গেছি। না, আমি হারায় নাই বা তেমন কোন কিছুও ঘঠেনি। শুধু কিছু দিন রেস্ট-এ ছিলাম। তো আমরা ইতি মধ্যেই এইচটিএমএল শেষ করে পেলছি। আপনারা যারা আমার আগের টিউন গুলো পড়েছেন তারা আমি কিছু টাস্ক দিয়ে ছিলাম। আশা করছি আপনারা সেগুলো সম্পূর্ণ করেছেন। আশা করার কারণ হচ্ছে, কেউই তো আপনাদের করা কোন কাজ আমাকে দেখাননি। তো এই টিউনটি যারা প্রথম পড়ছেন তাদের বলছি তারা নিচের লিঙ্ক থেকে দয়া করে আমার আগের টিউন গুলো পড়ে নিবেন।
ওয়েব ডেজাইনিং এর শুরু থেকে শুরু- ১ম পর্ব
ওয়েব ডেজাইনিং এর শুরু থেকে শুরু- ২য় পর্ব
ওয়েব ডেজাইনিং এর শুরু থেকে শুরু- ৩য় পর্ব
ওয়েব ডেজাইনিং এর শুরু থেকে শুরু- ৪র্থ পর্ব
ওয়েব ডেজাইনিং এর শুরু থেকে শুরু- ৫ম পর্ব
আজকের বিষয় হল, সিএসএস। সিএসএস এর পূর্ণ রুপ হল, CSS = Cascading Style Sheets। এর কাজ হল আপনার তৈরি করা এইচটিএমএল টেম্পলেট টিকে একটি সুন্দর রুপ দেওয়া।
যেমন ধরুন আপনি একটি বাড়ি তৈরি করছেন। তো আপনি ইট, বালি, সিমেন্ট দিয়ে বাড়িটি তৈরি করে ফেললেন, কিন্তু রং করেননি। বাড়িটাকে কি দেখতে সুন্দর দেখাবে, অবশ্যই না। বাড়িটির সুন্দর্য বৃদ্ধি করতে রং করার অতিব জরুরি।
ঠিক তেমনি এইচটিএমএল দিয়ে তৈরি টেম্পলেট টিকে সুন্দর করে প্রদর্শন করানোর জন্য সিএসএস অতিব জরুরি। আশ করি বুজতে পেরেছেন সিএসএস টা কি এবং কেন প্রয়োজন।
এখন জানব সিএসএস কয় প্রকার ও কি কি?
সিএসএস তিন প্রকার। যথাঃ
Inline Css;
Internal Css;
External Css.
সিএসএস-কে তিন ভাগে ভাগ করা হয়েছে তার লিখার ধরনের কারনে।
১. Inline Css: এই সিএসএস-এ কোড গুলো এইচটিএমএল-এর প্রতিটা লাইন বাই লাইনে লিখে টেম্পলেটটিকে রূপ প্রদান করা হয়।
২. Internal Css: এই সিএসএস-এ কোড গুলো এইচটিএমএল-এর হেড ট্যাগ এর মধ্যে লিখা হয়। হেড ট্যাগ এর মধ্যে সিএসএস কোড গুলো লিখার জন্য হেড ট্যাগ এর মধ্যে "<style></style>"-এই ট্যাগটি ব্যবহার করে তার মধ্যে সিএসএস কোড গুলো বসাতে হবে।
৩. External Css:এই সিএসএস-এ কোড গুলো অন্য একটি ফাইল-এ লিখে ফাইলটিকে এইচটিএমএল-এ যুক্ত করে দিতে হবে।
১. Html এ Inline Css কিভাবে লিখবেন?
ধরুন আপনি একটি div এ সিএসএস যুক্ত করবেন, কিভাবে করবেন। ইনলাইনে সিএসএস যুক্ত করার পদ্ধতি নিচে দেখানো হল।
<div style="Enter your css code here"></div>
2.html -এ Internal Css কিভাবে যুক্ত করবেন?
এইচটিএমএল-এ ইন্টারনাল সিএসএস যুক্ত করার জন্য আপনাকে নিচের পদ্ধতিটি অনুসরণ করতে হবে।
<html>
<head>
<style>
Enter your css code here.
</style>
</head>
<body></body>
</html>
৩. External Css এইচটিএমএল ফাইল-এ কিভাবে যুক্ত করবেন?
প্রথমে mysite.html ফাইল-এর মত করে your_style_sheet_name.css নামের একটি ফাইল তৈরি করতে হবে এবং তা এইচটিএমএল-এ যুক্ত করতে হবে। your_style_sheet_name.css ফাইল-টি তৈরির পর আপনার এইচটিএমএল ফাইলটি নোট প্যাড এ খুলুন তারপর এইচটিএমএল-এর হেড ট্যাগ-এ নিচের লিঙ্কটিকে যুক্ত করুন।
<link rel="stylesheet" href="your_style_sheet_name.css" type="text/css">
এখানে,
rel বলতে বুজানো হয়েছে রিলেশন কে। ফাইল-টির সাথে এইচটিএমএল-এর সম্পর্ক-টা কি তা বুজানো হয়েছে।
href সম্পর্কে আমরা আগেই এইচটিএমএল-এ জেনেছি। এর কাজ হল লিঙ্ক তৈরি করা এবং এখানেও সে এটাই করছে। এই href আপনার তৈরি করা your_style_sheet_name.css ফাইল-টিকে এইচটিএমএল-এর সাথে যুক্ত করে দিচ্ছে, যাতে করে আপনি যদি your_style_sheet_name.css -এ কোন কোড লিখেন তা যেন আপনার এইচটিএমএল ফাইল পরিবর্তন আনতে পারে।
আজ এইটুকু, পরবর্তী টিউনে দেখা হবে, ততদিন পর্যন্ত ভালো থাকবেন এবং আমার দোয়া করবেন। আল্লাহ হাফেয।
এটা আমার করা বাংলা ব্লগ, আপনারা চাইলে এখান থেকে ঘুরে আস্তে পারেন।
বেস্ট টিপস বিডি
ফেসবুক পেজ
![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 মেথড জানবো ও ব্যবহার করে দেখব")
ভাইয়া এই টিউন টা একটু দেখুন প্লিজ। একটা সমস্যাই পড়েছি
https://www.techtunes.io/wordpress/tune-id/393438