22 KiB

Raw Permalink Blame History

টেরারিয়াম প্রকল্প পার্ট ২: CSS-এ পরিচিতি

স্কেচনোট: Tomomi Imura

প্রাক-লেকচার কুইজ

পরিচিতি

CSS, বা Cascading Style Sheets, ওয়েব ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ সমস্যা সমাধান করে: কীভাবে আপনার ওয়েবসাইটকে সুন্দর দেখানো যায়। আপনার অ্যাপগুলিকে স্টাইলিং করলে সেগুলি আরও ব্যবহারযোগ্য এবং আকর্ষণীয় দেখায়; CSS ব্যবহার করে আপনি Responsive Web Design (RWD) তৈরি করতে পারেন - যা আপনার অ্যাপগুলিকে যেকোনো স্ক্রিন সাইজে ভালো দেখাতে সক্ষম করে। CSS কেবল আপনার অ্যাপকে সুন্দর দেখানোর জন্য নয়; এর স্পেসিফিকেশনে অ্যানিমেশন এবং ট্রান্সফর্ম অন্তর্ভুক্ত রয়েছে যা আপনার অ্যাপগুলির জন্য উন্নত ইন্টারঅ্যাকশন সক্ষম করতে পারে। CSS Working Group বর্তমান CSS স্পেসিফিকেশন বজায় রাখতে সাহায্য করে; তাদের কাজ আপনি World Wide Web Consortium-এর সাইটে অনুসরণ করতে পারেন।

মনে রাখবেন, CSS একটি ভাষা যা ওয়েবের মতোই ক্রমাগত বিকশিত হয়, এবং সব ব্রাউজার নতুন স্পেসিফিকেশনের অংশগুলো সমর্থন করে না। সবসময় CanIUse.com দেখে আপনার ইমপ্লিমেন্টেশন যাচাই করুন।

এই পাঠে, আমরা আমাদের অনলাইন টেরারিয়ামে স্টাইল যোগ করব এবং CSS-এর কয়েকটি ধারণা সম্পর্কে আরও জানব: ক্যাসকেড, ইনহেরিটেন্স, এবং সিলেক্টর, পজিশনিং, এবং CSS ব্যবহার করে লেআউট তৈরি করা। এই প্রক্রিয়ায় আমরা টেরারিয়াম লেআউট করব এবং টেরারিয়াম নিজেই তৈরি করব।

পূর্বশর্ত

আপনার টেরারিয়ামের HTML তৈরি করা এবং স্টাইলিংয়ের জন্য প্রস্তুত থাকা উচিত।

ভিডিও দেখুন

কাজ

আপনার টেরারিয়াম ফোল্ডারে একটি নতুন ফাইল তৈরি করুন যার নাম style.css। <head> সেকশনে সেই ফাইলটি ইমপোর্ট করুন:

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

ক্যাসকেড

Cascading Style Sheets ধারণাটি অন্তর্ভুক্ত করে যে স্টাইলগুলো 'ক্যাসকেড' করে, যাতে একটি স্টাইল প্রয়োগের অগ্রাধিকার দ্বারা নির্দেশিত হয়। ওয়েবসাইট লেখকের দ্বারা সেট করা স্টাইল ব্রাউজারের সেট করা স্টাইলের উপর অগ্রাধিকার পায়। 'ইনলাইন' স্টাইলগুলো এক্সটার্নাল স্টাইল শিটে সেট করা স্টাইলের উপর অগ্রাধিকার পায়।

কাজ

আপনার <h1> ট্যাগে "color: red" ইনলাইন স্টাইল যোগ করুন:

<h1 style="color: red">My Terrarium</h1>

তারপর, আপনার style.css ফাইলে নিম্নলিখিত কোড যোগ করুন:

h1 {
 color: blue;
}

✅ আপনার ওয়েব অ্যাপে কোন রঙ প্রদর্শিত হয়? কেন? আপনি কি স্টাইলগুলো ওভাররাইড করার উপায় খুঁজে পেয়েছেন? কখন আপনি এটি করতে চাইবেন, বা কেন নয়?

ইনহেরিটেন্স

স্টাইলগুলো পূর্বপুরুষের স্টাইল থেকে বংশধরদের মধ্যে উত্তরাধিকারসূত্রে প্রাপ্ত হয়, যাতে নেস্টেড এলিমেন্টগুলো তাদের প্যারেন্টের স্টাইল উত্তরাধিকারসূত্রে পায়।

কাজ

বডির ফন্ট একটি নির্দিষ্ট ফন্টে সেট করুন এবং নেস্টেড এলিমেন্টের ফন্ট পরীক্ষা করুন:

body {
	font-family: helvetica, arial, sans-serif;
}

আপনার ব্রাউজারের কনসোলের 'Elements' ট্যাবে যান এবং H1-এর ফন্ট পর্যবেক্ষণ করুন। এটি বডি থেকে তার ফন্ট উত্তরাধিকারসূত্রে পায়, যা ব্রাউজারে উল্লেখ করা হয়েছে:

✅ আপনি কি একটি নেস্টেড স্টাইলকে একটি ভিন্ন প্রপার্টি উত্তরাধিকারসূত্রে পেতে বাধ্য করতে পারেন?

CSS সিলেক্টর

এই পদ্ধতিতে একটি ট্যাগ স্টাইলিং আপনাকে অনন্য এলিমেন্টগুলোর উপর নিয়ন্ত্রণ দেয়, তবে আপনাকে টেরারিয়ামের অনেক গাছপালার স্টাইল নিয়ন্ত্রণ করতে হবে। এটি করতে, আপনাকে CSS সিলেক্টর ব্যবহার করতে হবে।

আইডি

বাম এবং ডান কন্টেইনারগুলোর লেআউট স্টাইল করতে কিছু স্টাইল যোগ করুন। যেহেতু মার্কআপে কেবল একটি বাম কন্টেইনার এবং একটি ডান কন্টেইনার রয়েছে, সেগুলোকে আইডি দেওয়া হয়েছে। সেগুলো স্টাইল করতে, # ব্যবহার করুন:

#left-container {
	background-color: #eee;
	width: 15%;
	left: 0px;
	top: 0px;
	position: absolute;
	height: 100%;
	padding: 10px;
}

#right-container {
	background-color: #eee;
	width: 15%;
	right: 0px;
	top: 0px;
	position: absolute;
	height: 100%;
	padding: 10px;
}

এখানে, আপনি এই কন্টেইনারগুলোকে স্ক্রিনের একেবারে বাম এবং ডান দিকে অ্যাবসোলিউট পজিশনিং দিয়ে রেখেছেন এবং তাদের প্রস্থের জন্য শতাংশ ব্যবহার করেছেন যাতে সেগুলো ছোট মোবাইল স্ক্রিনের জন্য স্কেল করতে পারে।

✅ এই কোডটি বেশ পুনরাবৃত্তিমূলক, যা "DRY" (Don't Repeat Yourself) নয়; আপনি কি এই আইডিগুলো স্টাইল করার আরও ভালো উপায় খুঁজে পেতে পারেন, হয়তো একটি আইডি এবং একটি ক্লাস ব্যবহার করে? আপনাকে মার্কআপ পরিবর্তন করতে হবে এবং CSS পুনর্গঠন করতে হবে:

<div id="left-container" class="container"></div>

ক্লাস

উপরের উদাহরণে, আপনি স্ক্রিনে দুটি অনন্য এলিমেন্ট স্টাইল করেছেন। যদি আপনি চান যে স্ক্রিনের অনেক এলিমেন্টে স্টাইল প্রয়োগ করা হোক, তবে আপনি CSS ক্লাস ব্যবহার করতে পারেন। বাম এবং ডান কন্টেইনারে গাছপালাগুলোর লেআউট করতে এটি করুন।

লক্ষ্য করুন যে HTML মার্কআপে প্রতিটি গাছপালার একটি আইডি এবং ক্লাসের সংমিশ্রণ রয়েছে। এখানে আইডিগুলো পরবর্তীতে জাভাস্ক্রিপ্ট দ্বারা টেরারিয়ামের গাছপালার অবস্থান নিয়ন্ত্রণ করতে ব্যবহৃত হবে। তবে ক্লাসগুলো সব গাছপালাকে একটি নির্দিষ্ট স্টাইল দেয়।

<div class="plant-holder">
	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
</div>

আপনার style.css ফাইলে নিম্নলিখিত কোড যোগ করুন:

.plant-holder {
	position: relative;
	height: 13%;
	left: -10px;
}

.plant {
	position: absolute;
	max-width: 150%;
	max-height: 150%;
	z-index: 2;
}

এই অংশে উল্লেখযোগ্য হলো রিলেটিভ এবং অ্যাবসোলিউট পজিশনিংয়ের মিশ্রণ, যা আমরা পরবর্তী অংশে আলোচনা করব। উচ্চতাগুলো শতাংশে কীভাবে পরিচালিত হয়েছে তা লক্ষ্য করুন:

আপনি প্ল্যান্ট হোল্ডারের উচ্চতা ১৩% সেট করেছেন, যা একটি ভালো সংখ্যা যাতে প্রতিটি উল্লম্ব কন্টেইনারে সব গাছপালা স্ক্রল ছাড়াই প্রদর্শিত হয়।

প্ল্যান্ট হোল্ডারকে বাম দিকে সরানো হয়েছে যাতে গাছপালাগুলো তাদের কন্টেইনারের মধ্যে আরও কেন্দ্রীভূত হয়। ইমেজগুলোতে একটি বড় পরিমাণ স্বচ্ছ ব্যাকগ্রাউন্ড রয়েছে যাতে সেগুলো আরও সহজে ড্র্যাগ করা যায়, তাই স্ক্রিনে আরও ভালোভাবে ফিট করার জন্য সেগুলো বাম দিকে ঠেলে দেওয়া হয়েছে।

তারপর, গাছপালাকে ১৫০% এর একটি সর্বোচ্চ প্রস্থ দেওয়া হয়েছে। এটি ব্রাউজার স্কেল করার সাথে সাথে এটি স্কেল ডাউন করতে দেয়। আপনার ব্রাউজারটি রিসাইজ করার চেষ্টা করুন; গাছপালাগুলো তাদের কন্টেইনারে থাকে কিন্তু ফিট করার জন্য স্কেল ডাউন করে।

এছাড়াও উল্লেখযোগ্য হলো z-index-এর ব্যবহার, যা একটি এলিমেন্টের আপেক্ষিক উচ্চতা নিয়ন্ত্রণ করে (যাতে গাছপালাগুলো কন্টেইনারের উপরে থাকে এবং টেরারিয়ামের ভিতরে বসে থাকে বলে মনে হয়)।

✅ কেন আপনার প্ল্যান্ট হোল্ডার এবং প্ল্যান্ট CSS সিলেক্টর উভয়েরই প্রয়োজন?

CSS পজিশনিং

পজিশন প্রপার্টিগুলোর (স্ট্যাটিক, রিলেটিভ, ফিক্সড, অ্যাবসোলিউট, এবং স্টিকি পজিশন) মিশ্রণ কিছুটা জটিল হতে পারে, তবে সঠিকভাবে করলে এটি আপনার পৃষ্ঠাগুলোর এলিমেন্টগুলোর উপর ভালো নিয়ন্ত্রণ দেয়।

অ্যাবসোলিউট পজিশনড এলিমেন্টগুলো তাদের নিকটতম পজিশনড পূর্বপুরুষদের তুলনায় পজিশনড হয়, এবং যদি কোনো পূর্বপুরুষ না থাকে, তবে এটি ডকুমেন্ট বডি অনুযায়ী পজিশনড হয়।

রিলেটিভ পজিশনড এলিমেন্টগুলো তাদের প্রাথমিক অবস্থান থেকে CSS-এর নির্দেশনা অনুযায়ী তাদের অবস্থান সামঞ্জস্য করে।

আমাদের উদাহরণে, plant-holder একটি রিলেটিভ পজিশনড এলিমেন্ট যা একটি অ্যাবসোলিউট পজিশনড কন্টেইনারের মধ্যে পজিশনড। এর ফলে সাইডবার কন্টেইনারগুলো বাম এবং ডান দিকে পিন করা হয়, এবং প্ল্যান্ট-হোল্ডার নেস্টেড হয়, সাইডবারগুলোর মধ্যে নিজেকে সামঞ্জস্য করে, গাছপালাগুলোকে একটি উল্লম্ব সারিতে রাখার জন্য জায়গা দেয়।

plant নিজেই একটি অ্যাবসোলিউট পজিশনিং পেয়েছে, যা এটি ড্র্যাগযোগ্য করতে প্রয়োজনীয়, যেমন আপনি পরবর্তী পাঠে আবিষ্কার করবেন।

✅ সাইড কন্টেইনার এবং প্ল্যান্ট-হোল্ডারের পজিশনিং টাইপগুলো পরিবর্তন করার চেষ্টা করুন। কী ঘটে?

CSS লেআউট

এখন আপনি যা শিখেছেন তা ব্যবহার করে CSS দিয়ে টেরারিয়াম নিজেই তৈরি করবেন!

প্রথমে, .terrarium ডিভের চাইল্ডগুলোকে CSS ব্যবহার করে একটি গোলাকার আয়তাকারে স্টাইল করুন:

.jar-walls {
	height: 80%;
	width: 60%;
	background: #d1e1df;
	border-radius: 1rem;
	position: absolute;
	bottom: 0.5%;
	left: 20%;
	opacity: 0.5;
	z-index: 1;
}

.jar-top {
	width: 50%;
	height: 5%;
	background: #d1e1df;
	position: absolute;
	bottom: 80.5%;
	left: 25%;
	opacity: 0.7;
	z-index: 1;
}

.jar-bottom {
	width: 50%;
	height: 1%;
	background: #d1e1df;
	position: absolute;
	bottom: 0%;
	left: 25%;
	opacity: 0.7;
}

.dirt {
	width: 60%;
	height: 5%;
	background: #3a241d;
	position: absolute;
	border-radius: 0 0 1rem 1rem;
	bottom: 1%;
	left: 20%;
	opacity: 0.7;
	z-index: -1;
}

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

আমরা rem ব্যবহার করছি বর্ডার-রেডিয়াসের জন্য, যা একটি ফন্ট-রিলেটিভ দৈর্ঘ্য। এই ধরনের রিলেটিভ মাপ সম্পর্কে আরও পড়ুন CSS স্পেসিফিকেশনে।

✅ জারের রঙ এবং অপাসিটি পরিবর্তন করার চেষ্টা করুন বনাম মাটির। কী ঘটে? কেন?

🚀চ্যালেঞ্জ

জারের বাম নিচের এলাকায় একটি 'বাবল' শাইন যোগ করুন যাতে এটি আরও কাঁচের মতো দেখায়। আপনি .jar-glossy-long এবং .jar-glossy-short স্টাইল করবেন যাতে এটি প্রতিফলিত শাইনের মতো দেখায়। এটি দেখতে এমন হবে:

পোস্ট-লেকচার কুইজ সম্পন্ন করতে, এই লার্ন মডিউলটি অনুসরণ করুন: আপনার HTML অ্যাপকে CSS দিয়ে স্টাইল করুন

পোস্ট-লেকচার কুইজ

পর্যালোচনা ও স্ব-অধ্যয়ন

CSS দেখতে সহজ মনে হতে পারে, তবে সব ব্রাউজার এবং সব স্ক্রিন সাইজের জন্য একটি অ্যাপ নিখুঁতভাবে স্টাইল করার সময় অনেক চ্যালেঞ্জ থাকে। CSS-Grid এবং Flexbox হলো এমন কিছু টুল যা কাজটিকে আরও কাঠামোগত এবং নির্ভরযোগ্য করে তুলতে তৈরি করা হয়েছে। এই টুলগুলো সম্পর্কে জানুন Flexbox Froggy এবং Grid Garden খেলে।

অ্যাসাইনমেন্ট

CSS পুনর্গঠন

অস্বীকৃতি:
এই নথিটি AI অনুবাদ পরিষেবা Co-op Translator ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। এর মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না।

22 KiB Raw Permalink Blame History