ধাপ
১

CSS কী?

CSS - Cascade Style Sheet

ওয়েব সাইট ডিজাইনে CSS খুব গুরুত্বপূর্ণ। এটি হচ্ছে কিছু রুল/নিয়ম এর সমষ্টি, যা ওয়েবসাইটের এলিমেন্টকে সাজাতে সাহায্য করে। রুল/নিয়ম সমূহে থাকে ওয়েবসাইটে কোন এলিমেন্ট কি ভাবে ব্রাউজারে দেখাবে।

HTML কি শুধু ব্রাউজারেই দেখা যায়?

ইংরেজী শব্দ browse এর অর্থ বই এ চোখ বুলানো। অর্থাৎ কোনো কিছু পড়া বা ঘাটাঘাটি করার জন্য যা ব্যবহার করা হয় তাই ব্রাউজার। ইন্টারনেট ব্যবহার করার জন্য বা ঘাটাঘাটি করার জন্য যে সফটওয়্যার ব্যবহার করা তাদের Internet Browser বলে।

তো বলা যায় HTML যাতে দেখা যায় তাই ব্রাউজার (স্পষ্ট করে বলতে গেলে ইন্টারনেট ব্রাউজার)। পরিচিত উদাহরণ Mozilla Firefox, Google Chrome, Microsoft IE (internet explorer) ইত্যাদি।

ওয়েবসাইটে প্রতিটি এলিমেন্টকে আলাদা আলাদাভাবে কোডিং করে ডিজাইন করা যায়। এটি খুব কষ্টকর। দেখা যায় একই জিনিস/এলিমেন্ট বার বার ব্যবহার করতে হচ্ছে, তাই বার বার একই কোড লিখতে হচ্ছে। এই সমস্যা সমাধানের জন্যই CSS তৈরি করা হয়।

CSS ডকুমেন্টকে স্টাইল শিট (Style Sheet) বলা হয়।

সংস্করণ

এখন পর্যন্ত CSS এর তিনটি সংস্করণ বের হয়েছে। CSS 1 ও CSS 2 (বর্তমানে প্রচলিত) এবং CSS 3 এর কাজ চলছে। বর্তমানে সব আধুনিক ব্রাউজার সবগুলো CSS সংস্করণই সমর্থন করে।

CSS ফাইল extension

CSS ডকুমেন্ট ফাইলে extension হিসেবে .css ব্যবহার করা।

প্রাথমিক বিষদ আলোচনা!

কয়েকটি প্রয়োজনীয় কথাবার্তা। একটু পর হয়ত লাগবে!

Tag

না জানলে এখান থেকে এখান থেকে জেনে আসুন।

Attribute

না জানলে এখান থেকে এখান থেকে জেনে আসুন।

Element

না জানলে এখান থেকে এখান থেকে জেনে আসুন।

CSS কোড লিখার নিয়ম (syntax)

CSS রুল গুলোর দুটি করে অংশ থাকে। যথাঃ

Selector
Declaration

Selector

Selector বলতে HTML ডকুমেন্ট এ ব্যবহৃত এলিমেন্ট ট্যাগ সমূহ (যেমনঃ a, p, h1, img ইত্যাদি) কে বুঝানো হয়। ট্যাগ ছাড়াও Class এবং ID নামে আরো দুই ধরনের সিলেক্টর CSS এ ব্যবহার করা হয়। প্রতিটি সিলেক্টরে এক বা একাধিক declaration থাকতে পারে।

Declaration

Declaration এ বলে দেয়া থাকে কোনো সিলেক্টরে নির্দিষ্ট করে দেয়া ট্যাগ/ class/ ID টি কিভাবে ব্রাউজারে দেখাবে।

ডিক্লারেশন সমূহ { এবং } ব্রাকেটের মাঝখানে লিখতে হয়।
প্রতিটি ডিক্লারেশনের শেষে ; (সেমিকোলোন) চিহ্ন ব্যবহার করা হয়।
প্রতিটি ডিক্লারেশনের দুটি অংশ। যথাঃ Property এবং Value।
Property: হল এলিমেন্টের যে বৈশিষ্ট্য পরিবর্তন হবে তার নাম। যেমনঃ color, font-size ইত্যাদি।
Value: প্রোপার্টি অনুযায়ী বিভিন্ন ভ্যালু হতে পারে। যেমনঃ রং (red, green, blue, orange ইত্যাদি), সংখ্যা (18px, 10em ইত্যাদি) ইত্যাদি।
প্রোপার্টি এবং ভ্যালু : (কোলোন) দ্বারা আলাদা করা থাকে।

সিলেক্টর এবং তার বিপরীতে ডিক্লারেশন নিয়ে তৈরি হয় এক একটি রুল (rule - বিধি/নিয়ম)। এ রুলসমূহকে ঐ সিলেক্টরের প্রোপার্টিজও (properties - বৈশিষ্ট্য) বলা হয়।

CSS এ লাইন এবং ফাঁকা জায়গা

উপরের চিত্রের উদাহরণ কোডটি আরেকবার দেখা যাকঃ

p {color:orange; font-size:18px;}

CSS লাইন সংখ্যা এবং ফাঁকা জায়গা (space) গণ্য (care) করে না, এসবকে উপেক্ষা (skip) করে যায়। অর্থাৎ উপরের রুলটিকে নিচের মত করে লিখলেও রুল একই থাকবে। এরকম লিখা হয় CSS রুল সমূহ পাঠযোগ্য এবং সহজে বুঝার জন্য।

p {
	color: orange;
	font-size: 18px;
}

একে কোনো ফাঁকা জায়গা ছাড়া এবং কোনো স্পেস ছাড়া এক লাইনেও রুলটি লিখা যায়ঃ

p{color:orange;font-size:18px;}

এরকম করা হয় ওয়েবসাইট বানানো শেষ হলে CSS ডকুমেন্টকে ছোট (minify) করার জন্য। এ নিয়ে সামনে আলোচনা করা হবে।

CSS এ মন্তব্য

CSS ফাইলে মন্তব্য লিখতে হয় /* এবং */ চিহ্নের মাঝখানে। চিহ্ন দুটির মাঝখানে এক বা একাধিক লাইন মন্তব্য লিখা যায়। মন্তব্য সমূহ কোডের বিভিন্ন অংশ বর্ণনা করতে ব্যবহৃত হয়। যা অনেকদিন পর কোড পুনরায় সম্পাদন করতে প্রোগ্রামারকে সাহায্য করে। আবার নতুন কোনো প্রোগ্রামারকে কোডটি বুঝাতেও মন্তব্য ব্যবহার করা হয়। মন্তব্যসমূহ শুধু সোর্সকোডেই দৃশ্যমান হয়, ব্রাউজারে নয়।

উদাহরণঃ

/* The CSS file. */
p	{
	/* <p> element color property */
	color: red;
	/* <p> element font size property */
	font-size: 26px;
}
/* this is a
multi-line css comment */

/*
This is also a comment.
Another line.
*/

<!-- The HTML file. -->
<html>
	<head>
		<!-- Let the css file named "style.css". -->
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>

	<body>
		<p>This is a paragraph.</p>
	</body>
</html>

প্রিভিউঃ

Browser

This is a paragraph.