My Terrarium
``` **یہ کوڈ کیا کرتا ہے:** - **سرخ رنگ** کو براہ راست `` عنصر پر لاگو کرتا ہے inline اسٹائلنگ کا استعمال کرتے ہوئے
- **`style` ایٹریبیوٹ** استعمال کرتا ہے تاکہ CSS کو براہ راست HTML میں شامل کیا جا سکے
- **اس مخصوص عنصر کے لیے** سب سے زیادہ ترجیحی اسٹائل رول بناتا ہے
پھر، اپنے `style.css` فائل میں یہ رول شامل کریں:
```css
h1 {
color: blue;
}
```
**اوپر دیے گئے میں ہم نے:**
- **CSS رول** کی وضاحت کی جو تمام `` عناصر کو ہدف بناتا ہے
- **ٹیکسٹ کا رنگ** نیلا مقرر کیا ایک بیرونی اسٹائل شیٹ کا استعمال کرتے ہوئے
- **ایک کم ترجیحی رول** بنایا inline اسٹائلز کے مقابلے میں
✅ **علمی جانچ**: آپ کے ویب ایپ میں کون سا رنگ ظاہر ہوتا ہے؟ وہ رنگ کیوں جیتتا ہے؟ کیا آپ ایسے منظرنامے سوچ سکتے ہیں جہاں آپ اسٹائلز کو اوور رائیڈ کرنا چاہیں؟
> 💡 **CSS ترجیحی ترتیب (سب سے زیادہ سے کم):**
> 1. **Inline styles** (style attribute)
> 2. **IDs** (#myId)
> 3. **Classes** (.myClass) اور attributes
> 4. **Element selectors** (h1, div, p)
> 5. **براؤزر ڈیفالٹس**
## CSS Inheritance کو عمل میں دیکھنا
CSS inheritance جینیات کی طرح کام کرتا ہے - عناصر اپنے پیرنٹ عناصر سے کچھ پراپرٹیز وراثت میں حاصل کرتے ہیں۔ اگر آپ نے body عنصر پر فونٹ فیملی سیٹ کی ہے، تو اندر کا تمام ٹیکسٹ خود بخود وہی فونٹ استعمال کرتا ہے۔ یہ بالکل ویسا ہی ہے جیسے ہبسبرگ خاندان کی منفرد جبڑے کی ساخت نسلوں میں ظاہر ہوئی بغیر ہر فرد کے لیے مخصوص کیے۔
تاہم، ہر چیز وراثت میں نہیں ملتی۔ ٹیکسٹ اسٹائلز جیسے فونٹس اور رنگ وراثت میں ملتے ہیں، لیکن لے آؤٹ پراپرٹیز جیسے margins اور borders نہیں ملتے۔ جیسے بچے جسمانی خصوصیات وراثت میں حاصل کر سکتے ہیں لیکن اپنے والدین کے فیشن انتخاب نہیں۔
### فونٹ وراثت کا مشاہدہ
آئیے وراثت کو عمل میں دیکھتے ہیں `` عنصر پر فونٹ فیملی سیٹ کرکے:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
```
**یہاں کیا ہوتا ہے:**
- **فونٹ فیملی** پورے صفحے کے لیے سیٹ کرتا ہے `` عنصر کو ہدف بنا کر
- **فونٹ اسٹیک** استعمال کرتا ہے بہتر براؤزر مطابقت کے لیے
- **جدید سسٹم فونٹس** لاگو کرتا ہے جو مختلف آپریٹنگ سسٹمز پر اچھے لگتے ہیں
- **یقین دہانی کراتا ہے** کہ تمام چائلڈ عناصر یہ فونٹ وراثت میں حاصل کریں جب تک کہ خاص طور پر اوور رائیڈ نہ کیا جائے
اپنے براؤزر کے ڈیولپر ٹولز (F12) کھولیں، Elements ٹیب پر جائیں، اور اپنے `` عنصر کا معائنہ کریں۔ آپ دیکھیں گے کہ یہ فونٹ فیملی کو body سے وراثت میں حاصل کرتا ہے:
✅ **تجربہ کا وقت**: `` پر دیگر وراثت میں ملنے والی پراپرٹیز جیسے `color`, `line-height`, یا `text-align` سیٹ کرنے کی کوشش کریں۔ آپ کی ہیڈنگ اور دیگر عناصر کے ساتھ کیا ہوتا ہے؟
> 📝 **وراثت میں ملنے والی پراپرٹیز شامل ہیں**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
>
> **غیر وراثت میں ملنے والی پراپرٹیز شامل ہیں**: `margin`, `padding`, `border`, `width`, `height`, `position`
## CSS Selectors کو مہارت سے سمجھنا
CSS selectors آپ کے لیے مخصوص عناصر کو اسٹائل کرنے کا طریقہ ہیں۔ یہ بالکل درست ہدایات دینے جیسا کام کرتے ہیں - "گھر" کہنے کے بجائے، آپ کہہ سکتے ہیں "نیلے دروازے والا گھر میپل اسٹریٹ پر۔"
CSS مختلف طریقے فراہم کرتا ہے مخصوص ہونے کے لیے، اور صحیح selector کا انتخاب کرنا کام کے لیے مناسب ٹول کا انتخاب کرنے جیسا ہے۔ کبھی آپ کو پورے محلے کے دروازے اسٹائل کرنے کی ضرورت ہوتی ہے، اور کبھی صرف ایک مخصوص دروازہ۔
### عنصر کے سلیکٹرز (Tags)
عنصر کے سلیکٹرز HTML عناصر کو ان کے ٹیگ نام سے ہدف بناتے ہیں۔ یہ بنیادی اسٹائلز سیٹ کرنے کے لیے بہترین ہیں جو آپ کے صفحے پر وسیع پیمانے پر لاگو ہوتے ہیں:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #3a241d;
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
}
```
**ان اسٹائلز کو سمجھنا:**
- **پورے صفحے پر مستقل ٹائپوگرافی** سیٹ کرتا ہے `body` سلیکٹر کے ساتھ
- **ڈیفالٹ براؤزر margins اور padding** ہٹاتا ہے بہتر کنٹرول کے لیے
- **تمام ہیڈنگ عناصر کو اسٹائل کرتا ہے** رنگ، الائنمنٹ، اور اسپیسنگ کے ساتھ
- **`rem` یونٹس استعمال کرتا ہے** قابل پیمائش، قابل رسائی فونٹ سائز کے لیے
جبکہ عنصر کے سلیکٹرز عمومی اسٹائلنگ کے لیے اچھے کام کرتے ہیں، آپ کو زیادہ مخصوص سلیکٹرز کی ضرورت ہوگی انفرادی اجزاء جیسے ٹیریریم میں پودوں کو اسٹائل کرنے کے لیے۔
### منفرد عناصر کے لیے ID سلیکٹرز
ID سلیکٹرز `#` علامت استعمال کرتے ہیں اور عناصر کو مخصوص `id` attributes کے ساتھ ہدف بناتے ہیں۔ چونکہ IDs صفحے پر منفرد ہونے چاہیئے، یہ انفرادی، خاص عناصر کو اسٹائل کرنے کے لیے بہترین ہیں جیسے ہمارے بائیں اور دائیں پودوں کے کنٹینرز۔
آئیے اپنے ٹیریریم کے سائیڈ کنٹینرز کے لیے اسٹائلنگ بنائیں جہاں پودے رہیں گے:
```css
#left-container {
background-color: #f5f5f5;
width: 15%;
left: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#right-container {
background-color: #f5f5f5;
width: 15%;
right: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
```
**یہ کوڈ کیا حاصل کرتا ہے:**
- **کنٹینرز کو پوزیشن کرتا ہے** اسکرین کے بائیں اور دائیں کناروں پر `absolute` پوزیشننگ کا استعمال کرتے ہوئے
- **`vh` یونٹس استعمال کرتا ہے** جوابی اونچائی کے لیے جو اسکرین کے سائز کے مطابق ڈھلتی ہے
- **`box-sizing: border-box` لاگو کرتا ہے** تاکہ padding کل چوڑائی میں شامل ہو
- **غیر ضروری `px` یونٹس ہٹاتا ہے** صفر ویلیوز سے صاف کوڈ کے لیے
- **ایک ہلکا پس منظر رنگ سیٹ کرتا ہے** جو آنکھوں پر سخت گرے کے مقابلے میں آسان ہے
✅ **کوڈ کوالٹی چیلنج**: نوٹ کریں کہ یہ CSS DRY (Don't Repeat Yourself) اصول کی خلاف ورزی کرتا ہے۔ کیا آپ اسے ID اور کلاس دونوں کا استعمال کرتے ہوئے ریفیکٹر کر سکتے ہیں؟
**بہتر طریقہ:**
```html
```
```css
.container {
background-color: #f5f5f5;
width: 15%;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#left-container {
left: 0;
}
#right-container {
right: 0;
}
```
### کلاس سلیکٹرز کے لیے دوبارہ استعمال ہونے والے اسٹائلز
کلاس سلیکٹرز `.` علامت استعمال کرتے ہیں اور بہترین ہیں جب آپ ایک جیسے اسٹائلز کو متعدد عناصر پر لاگو کرنا چاہتے ہیں۔ IDs کے برعکس، کلاسز آپ کے HTML میں دوبارہ استعمال کی جا سکتی ہیں، جو انہیں مستقل اسٹائلنگ پیٹرنز کے لیے مثالی بناتی ہیں۔
ہمارے ٹیریریم میں، ہر پودے کو ایک جیسا اسٹائلنگ کی ضرورت ہے لیکن انفرادی پوزیشننگ بھی چاہیے۔ ہم مشترکہ اسٹائلز کے لیے کلاسز اور منفرد پوزیشننگ کے لیے IDs کا مجموعہ استعمال کریں گے۔
**ہر پودے کے لیے HTML ڈھانچہ یہ ہے:**
```html
```
**اہم عناصر کی وضاحت:**
- **`class="plant-holder"` استعمال کرتا ہے** مستقل کنٹینر اسٹائلنگ کے لیے تمام پودوں میں
- **`class="plant"` لاگو کرتا ہے** مشترکہ تصویر اسٹائلنگ اور رویے کے لیے
- **منفرد `id="plant1"` شامل کرتا ہے** انفرادی پوزیشننگ اور جاوا اسکرپٹ تعامل کے لیے
- **وضاحتی alt ٹیکسٹ فراہم کرتا ہے** اسکرین ریڈر کی رسائی کے لیے
اب یہ اسٹائلز اپنے `style.css` فائل میں شامل کریں:
```css
.plant-holder {
position: relative;
height: 13%;
left: -0.6rem;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
transition: transform 0.3s ease;
}
.plant:hover {
transform: scale(1.05);
}
```
**ان اسٹائلز کو توڑ کر سمجھنا:**
- **کنٹینر کے لیے رشتہ دار پوزیشننگ بناتا ہے** پوزیشننگ سیاق و سباق قائم کرنے کے لیے
- **ہر پودے کے کنٹینر کو 13% اونچائی پر سیٹ کرتا ہے** تاکہ تمام پودے عمودی طور پر فٹ ہوں بغیر اسکرولنگ کے
- **کنٹینرز کو تھوڑا سا بائیں طرف منتقل کرتا ہے** تاکہ پودے اپنے کنٹینرز کے اندر بہتر مرکز میں ہوں
- **پودوں کو جوابی طور پر اسکیل کرنے کی اجازت دیتا ہے** `max-width` اور `max-height` پراپرٹیز کے ساتھ
- **`z-index` استعمال کرتا ہے** تاکہ پودے ٹیریریم کے دیگر عناصر کے اوپر تہہ ہوں
- **ایک ہلکا hover اثر شامل کرتا ہے** CSS ٹرانزیشنز کے ساتھ بہتر صارف تعامل کے لیے
✅ **تنقیدی سوچ**: ہمیں `.plant-holder` اور `.plant` سلیکٹرز دونوں کی ضرورت کیوں ہے؟ کیا ہوگا اگر ہم صرف ایک استعمال کرنے کی کوشش کریں؟
> 💡 **ڈیزائن پیٹرن**: کنٹینر (`.plant-holder`) لے آؤٹ اور پوزیشننگ کو کنٹرول کرتا ہے، جبکہ مواد (`.plant`) ظاہری شکل اور اسکیلنگ کو کنٹرول کرتا ہے۔ یہ علیحدگی کوڈ کو زیادہ قابل انتظام اور لچکدار بناتی ہے۔
## CSS پوزیشننگ کو سمجھنا
CSS پوزیشننگ ایک کھیل کے اسٹیج ڈائریکٹر ہونے جیسا ہے - آپ ہدایت دیتے ہیں کہ ہر اداکار کہاں کھڑا ہو اور اسٹیج پر کیسے حرکت کرے۔ کچھ اداکار معیاری ترتیب کی پیروی کرتے ہیں، جبکہ دوسروں کو ڈرامائی اثر کے لیے مخصوص پوزیشننگ کی ضرورت ہوتی ہے۔
ایک بار جب آپ پوزیشننگ کو سمجھ لیں، بہت سے لے آؤٹ چیلنجز قابل انتظام ہو جاتے ہیں۔ کیا آپ کو ایک نیویگیشن بار کی ضرورت ہے جو صارفین کے اسکرول کرتے وقت اوپر رہتا ہے؟ پوزیشننگ اس کا انتظام کرتی ہے۔ کیا آپ کو ایک ٹول ٹپ چاہیے جو مخصوص جگہ پر ظاہر ہو؟ یہ بھی پوزیشننگ ہے۔
### پانچ پوزیشن ویلیوز
| پوزیشن ویلیو | رویہ | استعمال کا کیس |
|----------------|----------|----------|
| `static` | ڈیفالٹ فلو، top/left/right/bottom کو نظر انداز کرتا ہے | عام دستاویز لے آؤٹ |
| `relative` | اپنی معمول کی پوزیشن کے لحاظ سے پوزیشنڈ | چھوٹے ایڈجسٹمنٹس، پوزیشننگ سیاق و سباق بنانا |
| `absolute` | قریب ترین پوزیشنڈ ancestor کے لحاظ سے پوزیشنڈ | درست جگہ، overlays |
| `fixed` | viewport کے لحاظ سے پوزیشنڈ | نیویگیشن بارز، فلوٹنگ عناصر |
| `sticky` | اسکرول کے لحاظ سے relative اور fixed کے درمیان سوئچ کرتا ہے | اسکرول کرتے وقت چپکنے والے ہیڈرز |
### ہمارے ٹیریریم میں پوزیشننگ
ہمارا ٹیریریم مطلوبہ لے آؤٹ بنانے کے لیے پوزیشننگ کی اقسام کا اسٹریٹجک مجموعہ استعمال کرتا ہے:
```css
/* Container positioning */
.container {
position: absolute; /* Removes from normal flow */
/* ... other styles ... */
}
/* Plant holder positioning */
.plant-holder {
position: relative; /* Creates positioning context */
/* ... other styles ... */
}
/* Plant positioning */
.plant {
position: absolute; /* Allows precise placement within holder */
/* ... other styles ... */
}
```
**پوزیشننگ حکمت عملی کو سمجھنا:**
- **Absolute کنٹینرز** عام دستاویز فلو سے ہٹا دیے جاتے ہیں اور اسکرین کے کناروں پر پن کیے جاتے ہیں
- **Relative plant holders** پوزیشننگ سیاق و سباق بناتے ہیں جبکہ دستاویز فلو میں رہتے ہیں
- **Absolute plants** کو ان کے relative کنٹینرز کے اندر درست طریقے سے پوزیشن کیا جا سکتا ہے
- **یہ مجموعہ** پودوں کو عمودی طور پر اسٹیک کرنے کی اجازت دیتا ہے جبکہ انفرادی طور پر پوزیشن ایبل ہوتا ہے
> 🎯 **یہ کیوں اہم ہے**: `plant` عناصر کو اگلے سبق میں ڈریگ ایبل بنانے کے لیے absolute پوزیشننگ کی ضرورت ہے۔ Absolute پوزیشننگ انہیں عام لے آؤٹ فلو سے ہٹا دیتی ہے، ڈریگ
آئیے ٹیریریم جار کو ایک ایک حصہ بنا کر تیار کریں۔ ہر حصہ مطلق پوزیشننگ اور فیصد پر مبنی سائزنگ کا استعمال کرتا ہے تاکہ ریسپانسیو ڈیزائن بنایا جا سکے:
```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;
box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
border-radius: 0.5rem 0.5rem 0 0;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0;
left: 25%;
opacity: 0.7;
border-radius: 0 0 0.5rem 0.5rem;
}
.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;
}
```
**ٹیریریم کی تعمیر کو سمجھنا:**
- **استعمال کرتا ہے** فیصد پر مبنی ڈائمینشنز تاکہ تمام اسکرین سائزز پر ریسپانسیو اسکیلنگ ہو سکے
- **پوزیشن کرتا ہے** عناصر کو مطلق طور پر تاکہ انہیں درست طریقے سے اسٹیک اور الائن کیا جا سکے
- **لگاتا ہے** مختلف اوپیسٹی ویلیوز تاکہ شیشے کی شفافیت کا اثر پیدا ہو
- **نافذ کرتا ہے** `z-index` لیئرنگ تاکہ پودے جار کے اندر نظر آئیں
- **شامل کرتا ہے** ہلکا باکس شیڈو اور نفیس بارڈر-ریڈیئس تاکہ زیادہ حقیقت پسندانہ شکل دی جا سکے
### فیصد کے ساتھ ریسپانسیو ڈیزائن
نوٹ کریں کہ تمام ڈائمینشنز فیصد کا استعمال کرتے ہیں بجائے فکسڈ پکسل ویلیوز کے:
**یہ کیوں اہم ہے:**
- **یقینی بناتا ہے** کہ ٹیریریم کسی بھی اسکرین سائز پر تناسبی طور پر اسکیل کرے
- **برقرار رکھتا ہے** جار کے اجزاء کے درمیان بصری تعلقات
- **فراہم کرتا ہے** موبائل فونز سے لے کر بڑے ڈیسک ٹاپ مانیٹرز تک ایک مستقل تجربہ
- **اجازت دیتا ہے** ڈیزائن کو بغیر بصری ترتیب کو توڑے ایڈجسٹ کرنے کی
### CSS یونٹس کا استعمال
ہم بارڈر-ریڈیئس کے لیے `rem` یونٹس استعمال کر رہے ہیں، جو روٹ فونٹ سائز کے مطابق اسکیل کرتے ہیں۔ یہ زیادہ قابل رسائی ڈیزائنز بناتا ہے جو صارف کے فونٹ ترجیحات کا احترام کرتے ہیں۔ [CSS relative units](https://www.w3.org/TR/css-values-3/#font-relative-lengths) کے بارے میں مزید جانیں آفیشل اسپیسفیکیشن میں۔
✅ **بصری تجربہ کاری**: ان ویلیوز کو تبدیل کریں اور اثرات کا مشاہدہ کریں:
- جار کی اوپیسٹی کو 0.5 سے 0.8 میں تبدیل کریں – شیشے کی شکل پر اس کا کیا اثر پڑتا ہے؟
- مٹی کے رنگ کو `#3a241d` سے `#8B4513` میں ایڈجسٹ کریں – اس کا بصری اثر کیا ہوتا ہے؟
- مٹی کے `z-index` کو 2 میں تبدیل کریں – لیئرنگ پر کیا اثر پڑتا ہے؟
---
## GitHub Copilot Agent Challenge 🚀
ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
**تفصیل:** ایک CSS اینیمیشن بنائیں جو ٹیریریم کے پودوں کو ہلکی ہوا کے اثر کی طرح آہستہ آہستہ جھومنے دے۔ یہ آپ کو CSS اینیمیشنز، ٹرانسفارمز، اور کی فریمز کی مشق کرنے میں مدد دے گا جبکہ آپ کے ٹیریریم کی بصری کشش کو بڑھائے گا۔
**پرومپٹ:** CSS کی فریم اینیمیشنز شامل کریں تاکہ ٹیریریم کے پودے آہستہ آہستہ ایک طرف سے دوسری طرف جھومیں۔ ایک جھومنے والی اینیمیشن بنائیں جو ہر پودے کو تھوڑا سا (2-3 ڈگری) بائیں اور دائیں گھمائے، جس کی مدت 3-4 سیکنڈ ہو، اور اسے `.plant` کلاس پر لاگو کریں۔ یقینی بنائیں کہ اینیمیشن لامتناہی طور پر لوپ کرے اور قدرتی حرکت کے لیے ایزنگ فنکشن ہو۔
[ایجنٹ موڈ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) کے بارے میں مزید جانیں۔
## 🚀 چیلنج: شیشے کی عکاسی شامل کرنا
کیا آپ اپنے ٹیریریم میں حقیقت پسندانہ شیشے کی عکاسی شامل کرنے کے لیے تیار ہیں؟ یہ تکنیک ڈیزائن میں گہرائی اور حقیقت پسندی کا اضافہ کرے گی۔
آپ ہلکے سفید یا روشنی کے رنگ کے بیضوی شکلیں بنائیں گے جو شیشے کی عکاسی کو ظاہر کریں۔ یہ طریقہ بالکل ویسا ہی ہے جیسے رینیسنس کے مصور جیسے جان وان آئیک نے روشنی اور عکاسی کا استعمال کیا تاکہ پینٹ کیے گئے شیشے کو تین جہتی ظاہر کیا جا سکے۔ آپ کا مقصد یہ ہے:
**آپ کا چیلنج:**
- **بنائیں** ہلکے سفید یا روشنی کے رنگ کے بیضوی شکلیں شیشے کی عکاسی کے لیے
- **انہیں** جار کے بائیں جانب اسٹریٹجک طور پر پوزیشن کریں
- **لگائیں** مناسب اوپیسٹی اور بلر ایفیکٹس حقیقت پسندانہ روشنی کی عکاسی کے لیے
- **استعمال کریں** `border-radius` تاکہ قدرتی، بلبلے جیسی شکلیں بن سکیں
- **تجربہ کریں** گریڈینٹس یا باکس شیڈوز کے ساتھ حقیقت پسندی کو بڑھانے کے لیے
## لیکچر کے بعد کا کوئز
[لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/quiz/18)
## اپنے CSS علم کو بڑھائیں
CSS شروع میں پیچیدہ محسوس ہو سکتا ہے، لیکن ان بنیادی تصورات کو سمجھنا آپ کو مزید جدید تکنیکوں کے لیے مضبوط بنیاد فراہم کرتا ہے۔
**آپ کے اگلے CSS سیکھنے کے علاقے:**
- **Flexbox** - عناصر کی سیدھ اور تقسیم کو آسان بناتا ہے
- **CSS Grid** - پیچیدہ لے آؤٹس بنانے کے لیے طاقتور ٹولز فراہم کرتا ہے
- **CSS Variables** - تکرار کو کم کرتا ہے اور مینٹین ایبلٹی کو بہتر بناتا ہے
- **Responsive design** - یقینی بناتا ہے کہ سائٹس مختلف اسکرین سائزز پر اچھی طرح کام کریں
### انٹرایکٹو لرننگ ریسورسز
ان تصورات کو ان دلچسپ، عملی گیمز کے ساتھ مشق کریں:
- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - Flexbox کو تفریحی چیلنجز کے ذریعے سیکھیں
- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - CSS Grid کو ورچوئل گاجروں کو اگا کر سیکھیں
- 🎯 [CSS Battle](https://cssbattle.dev/) - کوڈنگ چیلنجز کے ساتھ اپنے CSS مہارتوں کو آزمائیں
### اضافی سیکھنا
CSS کے بنیادی اصولوں کے لیے، یہ Microsoft Learn ماڈیول مکمل کریں: [اپنے HTML ایپ کو CSS کے ساتھ اسٹائل کریں](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
## اسائنمنٹ
[CSS Refactoring](assignment.md)
---
**ڈسکلیمر**:
یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔
` عنصر کا معائنہ کریں۔ آپ دیکھیں گے کہ یہ فونٹ فیملی کو body سے وراثت میں حاصل کرتا ہے:
✅ **تجربہ کا وقت**: `` پر دیگر وراثت میں ملنے والی پراپرٹیز جیسے `color`, `line-height`, یا `text-align` سیٹ کرنے کی کوشش کریں۔ آپ کی ہیڈنگ اور دیگر عناصر کے ساتھ کیا ہوتا ہے؟
> 📝 **وراثت میں ملنے والی پراپرٹیز شامل ہیں**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
>
> **غیر وراثت میں ملنے والی پراپرٹیز شامل ہیں**: `margin`, `padding`, `border`, `width`, `height`, `position`
## CSS Selectors کو مہارت سے سمجھنا
CSS selectors آپ کے لیے مخصوص عناصر کو اسٹائل کرنے کا طریقہ ہیں۔ یہ بالکل درست ہدایات دینے جیسا کام کرتے ہیں - "گھر" کہنے کے بجائے، آپ کہہ سکتے ہیں "نیلے دروازے والا گھر میپل اسٹریٹ پر۔"
CSS مختلف طریقے فراہم کرتا ہے مخصوص ہونے کے لیے، اور صحیح selector کا انتخاب کرنا کام کے لیے مناسب ٹول کا انتخاب کرنے جیسا ہے۔ کبھی آپ کو پورے محلے کے دروازے اسٹائل کرنے کی ضرورت ہوتی ہے، اور کبھی صرف ایک مخصوص دروازہ۔
### عنصر کے سلیکٹرز (Tags)
عنصر کے سلیکٹرز HTML عناصر کو ان کے ٹیگ نام سے ہدف بناتے ہیں۔ یہ بنیادی اسٹائلز سیٹ کرنے کے لیے بہترین ہیں جو آپ کے صفحے پر وسیع پیمانے پر لاگو ہوتے ہیں:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #3a241d;
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
}
```
**ان اسٹائلز کو سمجھنا:**
- **پورے صفحے پر مستقل ٹائپوگرافی** سیٹ کرتا ہے `body` سلیکٹر کے ساتھ
- **ڈیفالٹ براؤزر margins اور padding** ہٹاتا ہے بہتر کنٹرول کے لیے
- **تمام ہیڈنگ عناصر کو اسٹائل کرتا ہے** رنگ، الائنمنٹ، اور اسپیسنگ کے ساتھ
- **`rem` یونٹس استعمال کرتا ہے** قابل پیمائش، قابل رسائی فونٹ سائز کے لیے
جبکہ عنصر کے سلیکٹرز عمومی اسٹائلنگ کے لیے اچھے کام کرتے ہیں، آپ کو زیادہ مخصوص سلیکٹرز کی ضرورت ہوگی انفرادی اجزاء جیسے ٹیریریم میں پودوں کو اسٹائل کرنے کے لیے۔
### منفرد عناصر کے لیے ID سلیکٹرز
ID سلیکٹرز `#` علامت استعمال کرتے ہیں اور عناصر کو مخصوص `id` attributes کے ساتھ ہدف بناتے ہیں۔ چونکہ IDs صفحے پر منفرد ہونے چاہیئے، یہ انفرادی، خاص عناصر کو اسٹائل کرنے کے لیے بہترین ہیں جیسے ہمارے بائیں اور دائیں پودوں کے کنٹینرز۔
آئیے اپنے ٹیریریم کے سائیڈ کنٹینرز کے لیے اسٹائلنگ بنائیں جہاں پودے رہیں گے:
```css
#left-container {
background-color: #f5f5f5;
width: 15%;
left: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#right-container {
background-color: #f5f5f5;
width: 15%;
right: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
```
**یہ کوڈ کیا حاصل کرتا ہے:**
- **کنٹینرز کو پوزیشن کرتا ہے** اسکرین کے بائیں اور دائیں کناروں پر `absolute` پوزیشننگ کا استعمال کرتے ہوئے
- **`vh` یونٹس استعمال کرتا ہے** جوابی اونچائی کے لیے جو اسکرین کے سائز کے مطابق ڈھلتی ہے
- **`box-sizing: border-box` لاگو کرتا ہے** تاکہ padding کل چوڑائی میں شامل ہو
- **غیر ضروری `px` یونٹس ہٹاتا ہے** صفر ویلیوز سے صاف کوڈ کے لیے
- **ایک ہلکا پس منظر رنگ سیٹ کرتا ہے** جو آنکھوں پر سخت گرے کے مقابلے میں آسان ہے
✅ **کوڈ کوالٹی چیلنج**: نوٹ کریں کہ یہ CSS DRY (Don't Repeat Yourself) اصول کی خلاف ورزی کرتا ہے۔ کیا آپ اسے ID اور کلاس دونوں کا استعمال کرتے ہوئے ریفیکٹر کر سکتے ہیں؟
**بہتر طریقہ:**
```html
```
```css
.container {
background-color: #f5f5f5;
width: 15%;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#left-container {
left: 0;
}
#right-container {
right: 0;
}
```
### کلاس سلیکٹرز کے لیے دوبارہ استعمال ہونے والے اسٹائلز
کلاس سلیکٹرز `.` علامت استعمال کرتے ہیں اور بہترین ہیں جب آپ ایک جیسے اسٹائلز کو متعدد عناصر پر لاگو کرنا چاہتے ہیں۔ IDs کے برعکس، کلاسز آپ کے HTML میں دوبارہ استعمال کی جا سکتی ہیں، جو انہیں مستقل اسٹائلنگ پیٹرنز کے لیے مثالی بناتی ہیں۔
ہمارے ٹیریریم میں، ہر پودے کو ایک جیسا اسٹائلنگ کی ضرورت ہے لیکن انفرادی پوزیشننگ بھی چاہیے۔ ہم مشترکہ اسٹائلز کے لیے کلاسز اور منفرد پوزیشننگ کے لیے IDs کا مجموعہ استعمال کریں گے۔
**ہر پودے کے لیے HTML ڈھانچہ یہ ہے:**
```html
```
**اہم عناصر کی وضاحت:**
- **`class="plant-holder"` استعمال کرتا ہے** مستقل کنٹینر اسٹائلنگ کے لیے تمام پودوں میں
- **`class="plant"` لاگو کرتا ہے** مشترکہ تصویر اسٹائلنگ اور رویے کے لیے
- **منفرد `id="plant1"` شامل کرتا ہے** انفرادی پوزیشننگ اور جاوا اسکرپٹ تعامل کے لیے
- **وضاحتی alt ٹیکسٹ فراہم کرتا ہے** اسکرین ریڈر کی رسائی کے لیے
اب یہ اسٹائلز اپنے `style.css` فائل میں شامل کریں:
```css
.plant-holder {
position: relative;
height: 13%;
left: -0.6rem;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
transition: transform 0.3s ease;
}
.plant:hover {
transform: scale(1.05);
}
```
**ان اسٹائلز کو توڑ کر سمجھنا:**
- **کنٹینر کے لیے رشتہ دار پوزیشننگ بناتا ہے** پوزیشننگ سیاق و سباق قائم کرنے کے لیے
- **ہر پودے کے کنٹینر کو 13% اونچائی پر سیٹ کرتا ہے** تاکہ تمام پودے عمودی طور پر فٹ ہوں بغیر اسکرولنگ کے
- **کنٹینرز کو تھوڑا سا بائیں طرف منتقل کرتا ہے** تاکہ پودے اپنے کنٹینرز کے اندر بہتر مرکز میں ہوں
- **پودوں کو جوابی طور پر اسکیل کرنے کی اجازت دیتا ہے** `max-width` اور `max-height` پراپرٹیز کے ساتھ
- **`z-index` استعمال کرتا ہے** تاکہ پودے ٹیریریم کے دیگر عناصر کے اوپر تہہ ہوں
- **ایک ہلکا hover اثر شامل کرتا ہے** CSS ٹرانزیشنز کے ساتھ بہتر صارف تعامل کے لیے
✅ **تنقیدی سوچ**: ہمیں `.plant-holder` اور `.plant` سلیکٹرز دونوں کی ضرورت کیوں ہے؟ کیا ہوگا اگر ہم صرف ایک استعمال کرنے کی کوشش کریں؟
> 💡 **ڈیزائن پیٹرن**: کنٹینر (`.plant-holder`) لے آؤٹ اور پوزیشننگ کو کنٹرول کرتا ہے، جبکہ مواد (`.plant`) ظاہری شکل اور اسکیلنگ کو کنٹرول کرتا ہے۔ یہ علیحدگی کوڈ کو زیادہ قابل انتظام اور لچکدار بناتی ہے۔
## CSS پوزیشننگ کو سمجھنا
CSS پوزیشننگ ایک کھیل کے اسٹیج ڈائریکٹر ہونے جیسا ہے - آپ ہدایت دیتے ہیں کہ ہر اداکار کہاں کھڑا ہو اور اسٹیج پر کیسے حرکت کرے۔ کچھ اداکار معیاری ترتیب کی پیروی کرتے ہیں، جبکہ دوسروں کو ڈرامائی اثر کے لیے مخصوص پوزیشننگ کی ضرورت ہوتی ہے۔
ایک بار جب آپ پوزیشننگ کو سمجھ لیں، بہت سے لے آؤٹ چیلنجز قابل انتظام ہو جاتے ہیں۔ کیا آپ کو ایک نیویگیشن بار کی ضرورت ہے جو صارفین کے اسکرول کرتے وقت اوپر رہتا ہے؟ پوزیشننگ اس کا انتظام کرتی ہے۔ کیا آپ کو ایک ٹول ٹپ چاہیے جو مخصوص جگہ پر ظاہر ہو؟ یہ بھی پوزیشننگ ہے۔
### پانچ پوزیشن ویلیوز
| پوزیشن ویلیو | رویہ | استعمال کا کیس |
|----------------|----------|----------|
| `static` | ڈیفالٹ فلو، top/left/right/bottom کو نظر انداز کرتا ہے | عام دستاویز لے آؤٹ |
| `relative` | اپنی معمول کی پوزیشن کے لحاظ سے پوزیشنڈ | چھوٹے ایڈجسٹمنٹس، پوزیشننگ سیاق و سباق بنانا |
| `absolute` | قریب ترین پوزیشنڈ ancestor کے لحاظ سے پوزیشنڈ | درست جگہ، overlays |
| `fixed` | viewport کے لحاظ سے پوزیشنڈ | نیویگیشن بارز، فلوٹنگ عناصر |
| `sticky` | اسکرول کے لحاظ سے relative اور fixed کے درمیان سوئچ کرتا ہے | اسکرول کرتے وقت چپکنے والے ہیڈرز |
### ہمارے ٹیریریم میں پوزیشننگ
ہمارا ٹیریریم مطلوبہ لے آؤٹ بنانے کے لیے پوزیشننگ کی اقسام کا اسٹریٹجک مجموعہ استعمال کرتا ہے:
```css
/* Container positioning */
.container {
position: absolute; /* Removes from normal flow */
/* ... other styles ... */
}
/* Plant holder positioning */
.plant-holder {
position: relative; /* Creates positioning context */
/* ... other styles ... */
}
/* Plant positioning */
.plant {
position: absolute; /* Allows precise placement within holder */
/* ... other styles ... */
}
```
**پوزیشننگ حکمت عملی کو سمجھنا:**
- **Absolute کنٹینرز** عام دستاویز فلو سے ہٹا دیے جاتے ہیں اور اسکرین کے کناروں پر پن کیے جاتے ہیں
- **Relative plant holders** پوزیشننگ سیاق و سباق بناتے ہیں جبکہ دستاویز فلو میں رہتے ہیں
- **Absolute plants** کو ان کے relative کنٹینرز کے اندر درست طریقے سے پوزیشن کیا جا سکتا ہے
- **یہ مجموعہ** پودوں کو عمودی طور پر اسٹیک کرنے کی اجازت دیتا ہے جبکہ انفرادی طور پر پوزیشن ایبل ہوتا ہے
> 🎯 **یہ کیوں اہم ہے**: `plant` عناصر کو اگلے سبق میں ڈریگ ایبل بنانے کے لیے absolute پوزیشننگ کی ضرورت ہے۔ Absolute پوزیشننگ انہیں عام لے آؤٹ فلو سے ہٹا دیتی ہے، ڈریگ
آئیے ٹیریریم جار کو ایک ایک حصہ بنا کر تیار کریں۔ ہر حصہ مطلق پوزیشننگ اور فیصد پر مبنی سائزنگ کا استعمال کرتا ہے تاکہ ریسپانسیو ڈیزائن بنایا جا سکے:
```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;
box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
border-radius: 0.5rem 0.5rem 0 0;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0;
left: 25%;
opacity: 0.7;
border-radius: 0 0 0.5rem 0.5rem;
}
.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;
}
```
**ٹیریریم کی تعمیر کو سمجھنا:**
- **استعمال کرتا ہے** فیصد پر مبنی ڈائمینشنز تاکہ تمام اسکرین سائزز پر ریسپانسیو اسکیلنگ ہو سکے
- **پوزیشن کرتا ہے** عناصر کو مطلق طور پر تاکہ انہیں درست طریقے سے اسٹیک اور الائن کیا جا سکے
- **لگاتا ہے** مختلف اوپیسٹی ویلیوز تاکہ شیشے کی شفافیت کا اثر پیدا ہو
- **نافذ کرتا ہے** `z-index` لیئرنگ تاکہ پودے جار کے اندر نظر آئیں
- **شامل کرتا ہے** ہلکا باکس شیڈو اور نفیس بارڈر-ریڈیئس تاکہ زیادہ حقیقت پسندانہ شکل دی جا سکے
### فیصد کے ساتھ ریسپانسیو ڈیزائن
نوٹ کریں کہ تمام ڈائمینشنز فیصد کا استعمال کرتے ہیں بجائے فکسڈ پکسل ویلیوز کے:
**یہ کیوں اہم ہے:**
- **یقینی بناتا ہے** کہ ٹیریریم کسی بھی اسکرین سائز پر تناسبی طور پر اسکیل کرے
- **برقرار رکھتا ہے** جار کے اجزاء کے درمیان بصری تعلقات
- **فراہم کرتا ہے** موبائل فونز سے لے کر بڑے ڈیسک ٹاپ مانیٹرز تک ایک مستقل تجربہ
- **اجازت دیتا ہے** ڈیزائن کو بغیر بصری ترتیب کو توڑے ایڈجسٹ کرنے کی
### CSS یونٹس کا استعمال
ہم بارڈر-ریڈیئس کے لیے `rem` یونٹس استعمال کر رہے ہیں، جو روٹ فونٹ سائز کے مطابق اسکیل کرتے ہیں۔ یہ زیادہ قابل رسائی ڈیزائنز بناتا ہے جو صارف کے فونٹ ترجیحات کا احترام کرتے ہیں۔ [CSS relative units](https://www.w3.org/TR/css-values-3/#font-relative-lengths) کے بارے میں مزید جانیں آفیشل اسپیسفیکیشن میں۔
✅ **بصری تجربہ کاری**: ان ویلیوز کو تبدیل کریں اور اثرات کا مشاہدہ کریں:
- جار کی اوپیسٹی کو 0.5 سے 0.8 میں تبدیل کریں – شیشے کی شکل پر اس کا کیا اثر پڑتا ہے؟
- مٹی کے رنگ کو `#3a241d` سے `#8B4513` میں ایڈجسٹ کریں – اس کا بصری اثر کیا ہوتا ہے؟
- مٹی کے `z-index` کو 2 میں تبدیل کریں – لیئرنگ پر کیا اثر پڑتا ہے؟
---
## GitHub Copilot Agent Challenge 🚀
ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
**تفصیل:** ایک CSS اینیمیشن بنائیں جو ٹیریریم کے پودوں کو ہلکی ہوا کے اثر کی طرح آہستہ آہستہ جھومنے دے۔ یہ آپ کو CSS اینیمیشنز، ٹرانسفارمز، اور کی فریمز کی مشق کرنے میں مدد دے گا جبکہ آپ کے ٹیریریم کی بصری کشش کو بڑھائے گا۔
**پرومپٹ:** CSS کی فریم اینیمیشنز شامل کریں تاکہ ٹیریریم کے پودے آہستہ آہستہ ایک طرف سے دوسری طرف جھومیں۔ ایک جھومنے والی اینیمیشن بنائیں جو ہر پودے کو تھوڑا سا (2-3 ڈگری) بائیں اور دائیں گھمائے، جس کی مدت 3-4 سیکنڈ ہو، اور اسے `.plant` کلاس پر لاگو کریں۔ یقینی بنائیں کہ اینیمیشن لامتناہی طور پر لوپ کرے اور قدرتی حرکت کے لیے ایزنگ فنکشن ہو۔
[ایجنٹ موڈ](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) کے بارے میں مزید جانیں۔
## 🚀 چیلنج: شیشے کی عکاسی شامل کرنا
کیا آپ اپنے ٹیریریم میں حقیقت پسندانہ شیشے کی عکاسی شامل کرنے کے لیے تیار ہیں؟ یہ تکنیک ڈیزائن میں گہرائی اور حقیقت پسندی کا اضافہ کرے گی۔
آپ ہلکے سفید یا روشنی کے رنگ کے بیضوی شکلیں بنائیں گے جو شیشے کی عکاسی کو ظاہر کریں۔ یہ طریقہ بالکل ویسا ہی ہے جیسے رینیسنس کے مصور جیسے جان وان آئیک نے روشنی اور عکاسی کا استعمال کیا تاکہ پینٹ کیے گئے شیشے کو تین جہتی ظاہر کیا جا سکے۔ آپ کا مقصد یہ ہے:
**آپ کا چیلنج:**
- **بنائیں** ہلکے سفید یا روشنی کے رنگ کے بیضوی شکلیں شیشے کی عکاسی کے لیے
- **انہیں** جار کے بائیں جانب اسٹریٹجک طور پر پوزیشن کریں
- **لگائیں** مناسب اوپیسٹی اور بلر ایفیکٹس حقیقت پسندانہ روشنی کی عکاسی کے لیے
- **استعمال کریں** `border-radius` تاکہ قدرتی، بلبلے جیسی شکلیں بن سکیں
- **تجربہ کریں** گریڈینٹس یا باکس شیڈوز کے ساتھ حقیقت پسندی کو بڑھانے کے لیے
## لیکچر کے بعد کا کوئز
[لیکچر کے بعد کا کوئز](https://ff-quizzes.netlify.app/web/quiz/18)
## اپنے CSS علم کو بڑھائیں
CSS شروع میں پیچیدہ محسوس ہو سکتا ہے، لیکن ان بنیادی تصورات کو سمجھنا آپ کو مزید جدید تکنیکوں کے لیے مضبوط بنیاد فراہم کرتا ہے۔
**آپ کے اگلے CSS سیکھنے کے علاقے:**
- **Flexbox** - عناصر کی سیدھ اور تقسیم کو آسان بناتا ہے
- **CSS Grid** - پیچیدہ لے آؤٹس بنانے کے لیے طاقتور ٹولز فراہم کرتا ہے
- **CSS Variables** - تکرار کو کم کرتا ہے اور مینٹین ایبلٹی کو بہتر بناتا ہے
- **Responsive design** - یقینی بناتا ہے کہ سائٹس مختلف اسکرین سائزز پر اچھی طرح کام کریں
### انٹرایکٹو لرننگ ریسورسز
ان تصورات کو ان دلچسپ، عملی گیمز کے ساتھ مشق کریں:
- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - Flexbox کو تفریحی چیلنجز کے ذریعے سیکھیں
- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - CSS Grid کو ورچوئل گاجروں کو اگا کر سیکھیں
- 🎯 [CSS Battle](https://cssbattle.dev/) - کوڈنگ چیلنجز کے ساتھ اپنے CSS مہارتوں کو آزمائیں
### اضافی سیکھنا
CSS کے بنیادی اصولوں کے لیے، یہ Microsoft Learn ماڈیول مکمل کریں: [اپنے HTML ایپ کو CSS کے ساتھ اسٹائل کریں](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
## اسائنمنٹ
[CSS Refactoring](assignment.md)
---
**ڈسکلیمر**:
یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔