সিএসএস কি এবং কেনো শিখব? সিএসএস কিভাবে শিখব?

সিএসএস এর পূর্নরূপ Cascading Style Sheet HTML দিয়ে তৈরি ওয়েবসাইটকে ডিজাইন করতে CSS ব্যবহৃত হয়ে থাকে। HTML হচ্ছে একটি Markup Language যা দিয়ে একটি ওয়েবসাইটের গঠন তৈরি করা হয়৷ আর সিএসএস দিয়ে তার ডিজাইন করা হয়! ছোট্ট একটি উদাহারন দেয়া যাক।

একটি বাড়ি করতে গেলে প্রথমে ইট, সিমেন্ট, রড দিয়ে তার ভিত্তি এবং কলাম গুলো তৈরি করে নিতে হয়। তারপর তার রঙ করা, সাজানো ইত্যাদি কাজ গুলো করে নিতে হয়৷ ওয়েব ডিজাইনিং এর ক্ষেত্রে এই ১ম কাজটি করে থাকে HTML আর ২য় কাজটি করে CSS নিচের ছবি টি দেখে ধারণা আরও পরিষ্কার করে নেয়া যাক!

নিচের ছবির ক্যালকুলেটরটির প্রথম অংশটুকু শুধু HTML দিয়ে তৈরি আর পরের অংশটুকুতে এর সাথে CSS যোগ করা হয়েছে।

CSS in Bangla

CSS কে HTML ফাইলে ভাবে যুক্ত করা যায়।

. ইনলাইন সিএসএস

. ইন্টারনাল সিএসএস

. এক্সটারনাল সিএসএস

 

) ইনলাইন সিএসএস:

এইচটিএমএল ফাইলে এইচটিএমএল এর কোডিং এর সময় যে অংশের ডিজাইন করতে হবে ওই অংশেই একই লাইনে সিএসএস কোড যুক্ত করে দেয়ার পদ্ধতিকে ইনলাইন সিএসএস বলে৷

যেমন
<h1 style="text-align:center; color:#999999> CSS in Bangla </h1>
 

) ইন্টারনাল সিএসএস:

ইন্টারনাল সিএসএস হচ্ছে ওইসকল সিএসএস যাদেরকে এইচটিএমএল/HTML ফাইলের মধ্যেই <head> </head> ট্যাগের ভেতরে আবার <style> </style> এর ভেতরে করা হয়। এভাবে সিএসএস করতে Class এবং Id ব্যবহার করতে হয়।

 

উদাহারন স্বরূপ নিচের H1 এবং H2 ট্যাগটির কথাই বিবেচনা করা যাক।

 

HTML

<h1 class="heading-style"> Learn CSS in Bangla </h1>
<h2 id="f-para">CSS </h2>

এই অংশটুকুকে ডিজাইন করতে হলে CSS কোড হবে নিচের মতো:

<style>
	.heading-style {
		color:#999999;
		text-align: center;
	}
	#f-para { 
background-color: seagreen;
text-decoration: underline;
	}
</style> 


গ) এক্সটারনাল সিএসএস:

মূল এইচটিএমএল পেজের ভেতরে সিএসএস না করে .css এক্সটেনশনে অন্য একটি ফাইলের মধ্যে কোড করে পরবর্তীতে লিংক করে দিতে হয়। ইন্টারনাল সিএসএস করতে যেভাবে এইচটিএমএল কোড করতে হয়, ঠিক সেভাবেই কোড করে হেড ট্যাগের ভেতরে অন্য একটি ফাইল লিংক করে দিতে হয়। লিংক করা খুবই সহজ।

ধরে নিলাম, style.css নামের একটি ফাইল আলাদা ভাবে তৈরি করে এইচটিএমএলের সাথে একই ফোল্ডারে রাখলাম। (আলাদা ফোল্ডারে রাখলেও সমস্যা নেই, তবে একই ফোল্ডারে রাখলে সহজে লিংক করা যায়।) style.css এর মধ্যে নিচের কোডটুকু রাখলাম,

	.heading-style {
		color:#999999;
		text-align: center;
	}
	#f-para { 
background-color: seagreen;
text-decoration: underline;
	}

এখন এই style.css কে আমাদের মূল এইচটিএমএল ফাইলের <head></head> ট্যগের ভেতরে<link> ট্যাগের সাহায্যে যুক্ত করে দিতে হবে। যুক্ত করার জন্য নিচের কোডটুকু যুক্ত করতে হবে।

<link rel=”stylesheet” href=”style.css”/>


সিএসএস কিভাবে শিখব?

সিএসএস শেখার জন্য অনেক গুলো মাধ্যমই আছে। যার মধ্যে ফ্রিতে সবথেকে ভালো মাধ্যম হচ্ছে ইউটিউব। ইউটিউবে অনেক ভালো ভালো প্লেলিস্ট পাওয়া যায় যেখান থেকে সিএসএস খুব সহজে শেখা যায়। “আনিসুল ইসলাম” স্যারের চ্যানেল সেরকমই একটি চ্যানেল। এছাড়াও আরও অনেক দেশি বিদেশী চ্যানেলও আছে। করে নিতে পারেন “বহুব্রীহি” থেকে ফ্রি তে এভেইলেবল থাকা কোর্স গুলোও। এছাড়াও বই, পিডিএফ বই, অনলাইন সাইট, কোর্সেরা, এড-এক্স, উডেমী, প্রাতিষ্ঠানিক কোনো কোর্স থেকেও শিখতে পারবেন সিএসএস। এছাড়াও সিএসএস নিয়ে যেকোনো ধরনের প্রশ্ন করলে করতে পারেন আমাদেরকে নিচের কমেন্ট বক্সে কিংবা আমাদের ফেসবুক পেজে। ইন শা আল্লাহ, যত দ্রুত সম্ভব আপনার প্রশ্নের উত্তর দেয়া হবে।


Post a comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Below Post Ad