# টেরারিয়াম প্রকল্প পার্ট ২: CSS পরিচিতি
> স্কেচনোট: [Tomomi Imura](https://twitter.com/girlie_mac)
## প্রাক-লেকচার কুইজ
[প্রাক-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/17)
### পরিচিতি
CSS, বা Cascading Style Sheets, ওয়েব ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ সমস্যা সমাধান করে: কীভাবে আপনার ওয়েবসাইটকে সুন্দর দেখানো যায়। আপনার অ্যাপগুলিকে স্টাইলিং করলে সেগুলি আরও ব্যবহারযোগ্য এবং আকর্ষণীয় দেখায়; CSS ব্যবহার করে আপনি Responsive Web Design (RWD) তৈরি করতে পারেন - যা আপনার অ্যাপগুলিকে যেকোনো স্ক্রিন সাইজে ভালো দেখাতে সক্ষম করে। CSS শুধুমাত্র আপনার অ্যাপকে সুন্দর দেখানোর জন্য নয়; এর স্পেসিফিকেশন অ্যানিমেশন এবং ট্রান্সফর্ম অন্তর্ভুক্ত করে যা আপনার অ্যাপগুলির জন্য উন্নত ইন্টারঅ্যাকশন সক্ষম করতে পারে। CSS Working Group বর্তমান CSS স্পেসিফিকেশন বজায় রাখতে সাহায্য করে; তাদের কাজ আপনি [World Wide Web Consortium-এর সাইটে](https://www.w3.org/Style/CSS/members) অনুসরণ করতে পারেন।
> মনে রাখবেন, CSS একটি ভাষা যা ওয়েবের মতোই বিকশিত হয়, এবং সব ব্রাউজার নতুন স্পেসিফিকেশনের অংশগুলো সমর্থন করে না। আপনার ইমপ্লিমেন্টেশন যাচাই করতে [CanIUse.com](https://caniuse.com) ব্যবহার করুন।
এই পাঠে, আমরা আমাদের অনলাইন টেরারিয়ামে স্টাইল যোগ করব এবং CSS-এর কয়েকটি ধারণা সম্পর্কে আরও জানব: ক্যাসকেড, ইনহেরিটেন্স, এবং সিলেক্টর, পজিশনিং, এবং CSS ব্যবহার করে লেআউট তৈরি করার পদ্ধতি। এই প্রক্রিয়ায় আমরা টেরারিয়াম লেআউট করব এবং প্রকৃত টেরারিয়াম তৈরি করব।
### পূর্বশর্ত
আপনার টেরারিয়ামের HTML তৈরি করা এবং স্টাইলিংয়ের জন্য প্রস্তুত থাকা উচিত।
> ভিডিও দেখুন
>
> [](https://www.youtube.com/watch?v=6yIdOIV9p1I)
### কাজ
আপনার টেরারিয়াম ফোল্ডারে একটি নতুন ফাইল তৈরি করুন যার নাম `style.css`। `` সেকশনে সেই ফাইলটি ইমপোর্ট করুন:
```html
```
---
## ক্যাসকেড
Cascading Style Sheets ধারণাটি অন্তর্ভুক্ত করে যে স্টাইলগুলি 'ক্যাসকেড' করে, যার ফলে স্টাইল প্রয়োগের অগ্রাধিকার দ্বারা নির্দেশিত হয়। ওয়েবসাইট লেখকের দ্বারা সেট করা স্টাইল ব্রাউজারের সেট করা স্টাইলের উপর অগ্রাধিকার পায়। 'ইনলাইন' স্টাইলগুলি এক্সটার্নাল স্টাইল শিটে সেট করা স্টাইলের উপর অগ্রাধিকার পায়।
### কাজ
আপনার `
` ট্যাগে "color: red" ইনলাইন স্টাইল যোগ করুন:
```HTML
My Terrarium
```
তারপর, আপনার `style.css` ফাইলে নিম্নলিখিত কোড যোগ করুন:
```CSS
h1 {
color: blue;
}
```
✅ আপনার ওয়েব অ্যাপে কোন রঙ প্রদর্শিত হয়? কেন? আপনি কি স্টাইল ওভাররাইড করার উপায় খুঁজে পেতে পারেন? কখন আপনি এটি করতে চাইবেন, বা কেন নয়?
---
## ইনহেরিটেন্স
স্টাইলগুলি পূর্বপুরুষের স্টাইল থেকে বংশধরদের মধ্যে উত্তরাধিকারসূত্রে প্রাপ্ত হয়, যার ফলে নেস্টেড এলিমেন্টগুলি তাদের প্যারেন্টের স্টাইল গ্রহণ করে।
### কাজ
বডির ফন্ট একটি নির্দিষ্ট ফন্টে সেট করুন এবং একটি নেস্টেড এলিমেন্টের ফন্ট পরীক্ষা করুন:
```CSS
body {
font-family: helvetica, arial, sans-serif;
}
```
আপনার ব্রাউজারের কনসোলের 'Elements' ট্যাবে যান এবং H1-এর ফন্ট পর্যবেক্ষণ করুন। এটি বডি থেকে তার ফন্ট উত্তরাধিকারসূত্রে পায়, যা ব্রাউজারের মধ্যে উল্লেখ করা হয়েছে:
✅ আপনি কি একটি নেস্টেড স্টাইলকে একটি ভিন্ন প্রপার্টি উত্তরাধিকারসূত্রে পেতে বাধ্য করতে পারেন?
---
## CSS সিলেক্টর
### ট্যাগ
এখন পর্যন্ত, আপনার `style.css` ফাইলে শুধুমাত্র কয়েকটি ট্যাগ স্টাইল করা হয়েছে, এবং অ্যাপটি বেশ অদ্ভুত দেখাচ্ছে:
```CSS
body {
font-family: helvetica, arial, sans-serif;
}
h1 {
color: #3a241d;
text-align: center;
}
```
এই পদ্ধতিতে একটি ট্যাগ স্টাইলিং আপনাকে অনন্য এলিমেন্টগুলির উপর নিয়ন্ত্রণ দেয়, তবে আপনাকে আপনার টেরারিয়ামের অনেক গাছের স্টাইল নিয়ন্ত্রণ করতে হবে। এটি করতে, আপনাকে 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 পুনর্গঠন করতে হবে:
```html
```
### ক্লাস
উপরের উদাহরণে, আপনি স্ক্রিনে দুটি অনন্য এলিমেন্ট স্টাইল করেছেন। যদি আপনি স্ক্রিনে অনেক এলিমেন্টের উপর স্টাইল প্রয়োগ করতে চান, আপনি CSS ক্লাস ব্যবহার করতে পারেন। বাম এবং ডান কন্টেইনারগুলিতে গাছগুলির লেআউট করতে এটি করুন।
মনে রাখবেন যে HTML মার্কআপে প্রতিটি গাছের একটি আইডি এবং ক্লাসের সংমিশ্রণ রয়েছে। এখানে আইডিগুলি পরে যোগ করা জাভাস্ক্রিপ্ট দ্বারা টেরারিয়াম গাছের অবস্থান ম্যানিপুলেট করতে ব্যবহৃত হয়। তবে ক্লাসগুলি সমস্ত গাছকে একটি নির্দিষ্ট স্টাইল দেয়।
```html
```
আপনার `style.css` ফাইলে নিম্নলিখিত যোগ করুন:
```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-holder নেস্টেড, সাইডবারগুলির মধ্যে নিজেকে সামঞ্জস্য করে, গাছগুলিকে একটি উল্লম্ব সারিতে রাখার জন্য জায়গা দেয়।
> `plant` নিজেও অ্যাবসোলিউট পজিশনিং পেয়েছে, যা এটি ড্র্যাগযোগ্য করতে প্রয়োজনীয়, যেমন আপনি পরবর্তী পাঠে আবিষ্কার করবেন।
✅ সাইড কন্টেইনার এবং plant-holder-এর পজিশনিং টাইপ পরিবর্তন করার চেষ্টা করুন। কী ঘটে?
## CSS লেআউট
এখন আপনি যা শিখেছেন তা ব্যবহার করে CSS দিয়ে টেরারিয়াম নিজেই তৈরি করবেন!
প্রথমে, `.terrarium` div-এর শিশুদের CSS ব্যবহার করে একটি গোলাকার আয়তক্ষেত্র হিসাবে স্টাইল করুন:
```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 স্পেসিফিকেশনে](https://www.w3.org/TR/css-values-3/#font-relative-lengths)।
✅ জার এবং মাটির রঙ এবং অপাসিটি পরিবর্তন করার চেষ্টা করুন। কী ঘটে? কেন?
---
## 🚀চ্যালেঞ্জ
জারের বাম নিচের এলাকায় একটি 'বাবল' শাইন যোগ করুন যাতে এটি আরও কাচের মতো দেখায়। আপনি `.jar-glossy-long` এবং `.jar-glossy-short` স্টাইল করবেন যাতে এটি প্রতিফলিত শাইনের মতো দেখায়। এটি দেখতে এমন হবে:
পোস্ট-লেকচার কুইজ সম্পন্ন করতে, এই লার্ন মডিউলটি অনুসরণ করুন: [আপনার HTML অ্যাপকে CSS দিয়ে স্টাইল করুন](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
## পোস্ট-লেকচার কুইজ
[পোস্ট-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/18)
## পর্যালোচনা ও স্ব-অধ্যয়ন
CSS সহজ মনে হতে পারে, তবে সমস্ত ব্রাউজার এবং স্ক্রিন সাইজের জন্য একটি অ্যাপ নিখুঁতভাবে স্টাইল করার সময় অনেক চ্যালেঞ্জ থাকে। CSS-Grid এবং Flexbox এমন টুল যা কাজটিকে একটু বেশি কাঠামোগত এবং নির্ভরযোগ্য করে তুলতে তৈরি করা হয়েছে। এই টুলগুলি সম্পর্কে জানুন [Flexbox Froggy](https://flexboxfroggy.com/) এবং [Grid Garden](https://codepip.com/games/grid-garden/) খেলতে।
## অ্যাসাইনমেন্ট
[CSS পুনর্গঠন](assignment.md)
---
**অস্বীকৃতি**:
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না।
