` ਟੈਗ ਵਿੱਚ ਇੱਕ ਇਨਲਾਈਨ ਸਟਾਈਲ ਸ਼ਾਮਲ ਕਰੋ: ```html

My Terrarium

` ਤੱਤ ਨੂੰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਇਨਲਾਈਨ ਸਟਾਈਲਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਲਾਲ ਰੰਗ - **ਵਰਤਣਾ**: `style` ਗੁਣ ਨੂੰ CSS ਨੂੰ ਸਿੱਧੇ HTML ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਲਈ - **ਬਣਾਉਣਾ**: ਇਸ ਵਿਸ਼ੇਸ਼ ਤੱਤ ਲਈ ਸਭ ਤੋਂ ਉੱਚੀ ਪ੍ਰਾਥਮਿਕਤਾ ਵਾਲਾ ਸਟਾਈਲ ਨਿਯਮ ਅਗਲੇ, ਆਪਣੇ `style.css` ਫਾਈਲ ਵਿੱਚ ਇਹ ਨਿਯਮ ਸ਼ਾਮਲ ਕਰੋ: ```css h1 { color: blue; } ``` **ਉਪਰੋਕਤ ਵਿੱਚ, ਅਸੀਂ:** - **ਪ੍ਰਭਾਵਿਤ ਕੀਤਾ**: ਇੱਕ CSS ਨਿਯਮ ਜੋ ਸਾਰੇ `

` ਤੱਤਾਂ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦਾ ਹੈ - **ਸੈਟ ਕੀਤਾ**: ਟੈਕਸਟ ਰੰਗ ਨੂੰ ਬਲੂ ਵਿੱਚ ਬਾਹਰੀ ਸਟਾਈਲਸ਼ੀਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ - **ਬਣਾਇਆ**: ਇਨਲਾਈਨ ਸਟਾਈਲਜ਼ ਦੇ ਮੁਕਾਬਲੇ ਘੱਟ ਪ੍ਰਾਥਮਿਕਤਾ ਵਾਲਾ ਨਿਯਮ ✅ **ਗਿਆਨ ਜਾਂਚ**: ਤੁਹਾਡੇ ਵੈਬ ਐਪ ਵਿੱਚ ਕਿਹੜਾ ਰੰਗ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ? ਕਿਹੜਾ ਰੰਗ ਜਿੱਤਦਾ ਹੈ? ਕੀ ਤੁਸੀਂ ਉਹ ਸਥਿਤੀਆਂ ਸੋਚ ਸਕਦੇ ਹੋ ਜਿੱਥੇ ਤੁਸੀਂ ਸਟਾਈਲਜ਼ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ? > 💡 **CSS ਪ੍ਰਾਥਮਿਕਤਾ ਕ੍ਰਮ (ਸਭ ਤੋਂ ਉੱਚਾ ਤੋਂ ਸਭ ਤੋਂ ਘੱਟ):** > 1. **ਇਨਲਾਈਨ ਸਟਾਈਲਜ਼** (style attribute) > 2. **IDs** (#myId) > 3. **ਕਲਾਸਾਂ** (.myClass) ਅਤੇ ਗੁਣ > 4. **ਤੱਤ ਚੁਣਨ ਵਾਲੇ** (h1, div, p) > 5. **ਬ੍ਰਾਊਜ਼ਰ ਡਿਫਾਲਟਸ** ## CSS ਵਿਰਾਸਤ ਕਾਰਵਾਈ ਵਿੱਚ CSS ਵਿਰਾਸਤ ਜੈਨੇਟਿਕਸ ਵਾਂਗ ਕੰਮ ਕਰਦੀ ਹੈ - ਤੱਤ ਆਪਣੇ ਮਾਤਾ-ਪਿਤਾ ਦੇ ਤੱਤਾਂ ਤੋਂ ਕੁਝ ਗੁਣ ਵਿਰਾਸਤ ਵਿੱਚ ਲੈਂਦੇ ਹਨ। ਜੇ ਤੁਸੀਂ ਬਾਡੀ ਤੱਤ 'ਤੇ ਫੋਂਟ ਫੈਮਿਲੀ ਸੈਟ ਕਰਦੇ ਹੋ, ਤਾਂ ਸਾਰੇ ਟੈਕਸਟ ਆਪਣੇ ਆਪ ਉਹੀ ਫੋਂਟ ਵਰਤਦਾ ਹੈ। ਇਹ ਉਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਕਿ ਹੈਬਸਬਰਗ ਪਰਿਵਾਰ ਦੀ ਵਿਸ਼ੇਸ਼ ਜੌਲਾਈਨ ਕਈ ਪੀੜ੍ਹੀਆਂ ਵਿੱਚ ਪ੍ਰਗਟ ਹੋਈ ਬਿਨਾਂ ਇਸਨੂੰ ਹਰ ਵਿਅਕਤੀ ਲਈ ਨਿਰਧਾਰਤ ਕੀਤਾ ਗਿਆ। ਹਾਲਾਂਕਿ, ਹਰ ਚੀਜ਼ ਵਿਰਾਸਤ ਵਿੱਚ ਨਹੀਂ ਮਿਲਦੀ। ਫੋਂਟ ਅਤੇ ਰੰਗ ਵਰਗੇ ਟੈਕਸਟ ਸਟਾਈਲ ਵਿਰਾਸਤ ਵਿੱਚ ਮਿਲਦੇ ਹਨ, ਪਰ ਮਾਰਜਿਨ ਅਤੇ ਬਾਰਡਰ ਵਰਗੇ ਲੇਆਉਟ ਗੁਣ ਨਹੀਂ ਮਿਲਦੇ। ਜਿਵੇਂ ਕਿ ਬੱਚੇ ਸ਼ਾਰੀਰੀਕ ਗੁਣ ਵਿਰਾਸਤ ਵਿੱਚ ਲੈ ਸਕਦੇ ਹਨ ਪਰ ਆਪਣੇ ਮਾਤਾ-ਪਿਤਾ ਦੀਆਂ ਫੈਸ਼ਨ ਚੋਣਾਂ ਨਹੀਂ। ### ਫੋਂਟ ਵਿਰਾਸਤ ਦਾ ਅਵਲੋਕਨ ਆਓ ਵਿਰਾਸਤ ਨੂੰ ਕਾਰਵਾਈ ਵਿੱਚ ਦੇਖੀਏ ਜਦੋਂ ਤੁਸੀਂ `` ਤੱਤ 'ਤੇ ਫੋਂਟ ਫੈਮਿਲੀ ਸੈਟ ਕਰਦੇ ਹੋ: ```css body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } ``` **ਇੱਥੇ ਕੀ ਹੁੰਦਾ ਹੈ ਇਸਦਾ ਵਿਸ਼ਲੇਸ਼ਣ:** - **ਸੈਟ ਕਰਨਾ**: ਪੂਰੇ ਪੇਜ ਲਈ ਫੋਂਟ ਫੈਮਿਲੀ ਨੂੰ ਟਾਰਗਟ ਕਰਕੇ `` ਤੱਤ - **ਵਰਤਣਾ**: ਫੋਂਟ ਸਟੈਕ ਨਾਲ ਫਾਲਬੈਕ ਵਿਕਲਪਾਂ ਲਈ ਵਧੀਆ ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ - **ਲਾਗੂ ਕਰਨਾ**: ਆਧੁਨਿਕ ਸਿਸਟਮ ਫੋਂਟ ਜੋ ਵੱਖ-ਵੱਖ ਓਪਰੇਟਿੰਗ ਸਿਸਟਮਾਂ 'ਤੇ ਸ਼ਾਨਦਾਰ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ - **ਸੁਨਿਸ਼ਚਿਤ ਕਰਨਾ**: ਸਾਰੇ ਚਾਈਲਡ ਤੱਤ ਇਸ ਫੋਂਟ ਨੂੰ ਵਿਰਾਸਤ ਵਿੱਚ ਲੈਂਦੇ ਹਨ ਜਦੋਂ ਤੱਕ ਇਸਨੂੰ ਖਾਸ ਤੌਰ 'ਤੇ ਓਵਰਰਾਈਡ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਵੈਲਪਰ ਟੂਲ (F12) ਖੋਲ੍ਹੋ, ਐਲਿਮੈਂਟਸ ਟੈਬ 'ਤੇ ਜਾਓ, ਅਤੇ ਆਪਣੇ `

` ਤੱਤ ਦੀ ਜਾਂਚ ਕਰੋ। ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਇਹ ਬਾਡੀ ਤੋਂ ਫੋਂਟ ਫੈਮਿਲੀ ਨੂੰ ਵਿਰਾਸਤ ਵਿੱਚ ਲੈਂਦਾ ਹੈ:  ✅ **ਪ੍ਰਯੋਗ ਸਮਾਂ**: `` 'ਤੇ `color`, `line-height`, ਜਾਂ `text-align` ਵਰਗੇ ਹੋਰ ਵਿਰਾਸਤ ਗੁਣ ਸੈਟ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਤੁਹਾਡੇ ਹੈਡਿੰਗ ਅਤੇ ਹੋਰ ਤੱਤਾਂ 'ਤੇ ਕੀ ਹੁੰਦਾ ਹੈ? > 📝 **ਵਿਰਾਸਤ ਗੁਣ ਸ਼ਾਮਲ ਹਨ**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility` > > **ਗੈਰ-ਵਿਰਾਸਤ ਗੁਣ ਸ਼ਾਮਲ ਹਨ**: `margin`, `padding`, `border`, `width`, `height`, `position` ## CSS ਚੁਣਨ ਵਾਲਿਆਂ ਨੂੰ ਸਮਝਣਾ CSS ਚੁਣਨ ਵਾਲੇ ਤੁਹਾਡੇ ਤੱਤਾਂ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਲਈ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਦਾ ਤਰੀਕਾ ਹਨ। ਇਹ ਸਹੀ ਦਿਸ਼ਾ ਦੇਣ ਵਾਂਗ ਕੰਮ ਕਰਦੇ ਹਨ - "ਘਰ" ਕਹਿਣ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਕਹਿ ਸਕਦੇ ਹੋ "ਲਾਲ ਦਰਵਾਜ਼ੇ ਵਾਲਾ ਨੀਲਾ ਘਰ ਜੋ ਮੇਪਲ ਸਟ੍ਰੀਟ 'ਤੇ ਹੈ।" CSS ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਨਾਲ ਵਿਸ਼ੇਸ਼ ਹੋਣ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦਾ ਹੈ, ਅਤੇ ਸਹੀ ਚੁਣਨ ਵਾਲੇ ਦੀ ਚੋਣ ਕਰਨਾ ਕੰਮ ਲਈ ਉਚਿਤ ਸੰਦ ਦੀ ਚੋਣ ਕਰਨ ਵਾਂਗ ਹੈ। ਕਈ ਵਾਰ ਤੁਹਾਨੂੰ ਪੜੋਸ ਵਿੱਚ ਹਰ ਦਰਵਾਜ਼ੇ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੁੰਦੀ ਹੈ, ਅਤੇ ਕਈ ਵਾਰ ਸਿਰਫ਼ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਦਰਵਾਜ਼ੇ ਨੂੰ। ### ਤੱਤ ਚੁਣਨ ਵਾਲੇ (ਟੈਗ) ਤੱਤ ਚੁਣਨ ਵਾਲੇ 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` ਚੁਣਨ ਵਾਲੇ ਨਾਲ - **ਹਟਾਉਣਾ**: ਡਿਫਾਲਟ ਬ੍ਰਾਊਜ਼ਰ ਮਾਰਜਿਨ ਅਤੇ ਪੈਡਿੰਗ ਲਈ ਵਧੀਆ ਕੰਟਰੋਲ - **ਸਟਾਈਲ ਕਰਨਾ**: ਸਾਰੇ ਹੈਡਿੰਗ ਤੱਤ ਰੰਗ, ਸੰਰੂਪਤਾ, ਅਤੇ ਸਪੇਸਿੰਗ ਨਾਲ - **ਵਰਤਣਾ**: `rem` ਯੂਨਿਟਸ ਲਈ ਸਕੇਲਬਲ, ਐਕਸੈਸਿਬਲ ਫੋਂਟ ਸਾਈਜ਼ ਤੱਤ ਚੁਣਨ ਵਾਲੇ ਆਮ ਸਟਾਈਲਿੰਗ ਲਈ ਚੰਗੇ ਕੰਮ ਕਰਦੇ ਹਨ, ਪਰ ਤੁਹਾਨੂੰ ਵਿਅਕਤੀਗਤ ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਲਈ ਹੋਰ ਵਿਸ਼ੇਸ਼ ਚੁਣਨ ਵਾਲਿਆਂ ਦੀ ਜ਼ਰੂਰਤ ਹੋਵੇਗੀ ਜਿਵੇਂ ਕਿ ਤੁਹਾਡੇ ਟੈਰੀਰੀਅਮ ਵਿੱਚ ਪੌਦੇ। ### ਵਿਲੱਖਣ ਤੱਤਾਂ ਲਈ ID ਚੁਣਨ ਵਾਲੇ ID ਚੁਣਨ ਵਾਲੇ `#` ਚਿੰਨ੍ਹ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ ਅਤੇ ਵਿਸ਼ੇਸ਼ `id` ਗੁਣਾਂ ਵਾਲੇ ਤੱਤਾਂ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦੇ ਹਨ। ਕਿਉਂਕਿ 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` ਸਥਿਤੀ ਦੀ ਵਰਤ ਆਓ ਟੈਰੀਰੀਅਮ ਜਾਰ ਨੂੰ ਹਿਸਾ-ਹਿਸਾ ਕਰਕੇ ਬਣਾਈਏ। ਹਰ ਹਿੱਸਾ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਲਈ ਐਬਸੋਲਿਊਟ ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਅਤੇ ਪ੍ਰਤੀਸ਼ਤ-ਅਧਾਰਿਤ ਸਾਈਜ਼ਿੰਗ ਵਰਤਦਾ ਹੈ: ```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 ਰਿਲੇਟਿਵ ਯੂਨਿਟਾਂ](https://www.w3.org/TR/css-values-3/#font-relative-lengths) ਬਾਰੇ ਅਧਿਕਾਰਤ ਵਿਸ਼ੇਸ਼ਤਾ ਵਿੱਚ ਹੋਰ ਜਾਣੋ। ✅ **ਦ੍ਰਿਸ਼ਟੀ ਅਨੁਭਵ**: ਇਨ੍ਹਾਂ ਮੁੱਲਾਂ ਨੂੰ ਬਦਲੋ ਅਤੇ ਪ੍ਰਭਾਵਾਂ ਨੂੰ ਦੇਖੋ: - ਜਾਰ ਦੀ ਓਪੈਸਿਟੀ ਨੂੰ 0.5 ਤੋਂ 0.8 ਵਿੱਚ ਬਦਲੋ – ਇਹ ਗਲਾਸ ਦੀ ਦਿਖਾਵਟ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਭਾਵਿਤ ਕਰਦਾ ਹੈ? - ਮਿੱਟੀ ਦੇ ਰੰਗ ਨੂੰ `#3a241d` ਤੋਂ `#8B4513` ਵਿੱਚ ਬਦਲੋ – ਇਸਦਾ ਦ੍ਰਿਸ਼ਟੀ ਪ੍ਰਭਾਵ ਕੀ ਹੈ? - ਮਿੱਟੀ ਦੇ `z-index` ਨੂੰ 2 ਵਿੱਚ ਬਦਲੋ – ਲੇਅਰਿੰਗ 'ਤੇ ਕੀ ਹੁੰਦਾ ਹੈ? --- ## GitHub Copilot Agent ਚੈਲੈਂਜ 🚀 Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ: **ਵੇਰਵਾ:** CSS ਐਨੀਮੇਸ਼ਨ ਬਣਾਓ ਜੋ ਟੈਰੀਰੀਅਮ ਪੌਦਿਆਂ ਨੂੰ ਹੌਲੀ-ਹੌਲੀ ਹਵਾ ਦੇ ਪ੍ਰਭਾਵ ਨਾਲ ਹਿਲਾਉਂਦਾ ਹੈ। ਇਹ CSS ਐਨੀਮੇਸ਼ਨ, ਟ੍ਰਾਂਸਫਾਰਮਸ ਅਤੇ ਕੀਫਰੇਮਸ ਦੀ ਪ੍ਰੈਕਟਿਸ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ ਅਤੇ ਤੁਹਾਡੇ ਟੈਰੀਰੀਅਮ ਦੀ ਦ੍ਰਿਸ਼ਟੀ ਅਪੀਲ ਨੂੰ ਵਧਾਏਗਾ। **ਪ੍ਰੋੰਪਟ:** CSS ਕੀਫਰੇਮ ਐਨੀਮੇਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ ਤਾਂ ਜੋ ਟੈਰੀਰੀਅਮ ਦੇ ਪੌਦੇ ਹੌਲੀ-ਹੌਲੀ ਪਾਸੇ ਤੋਂ ਪਾਸੇ ਹਿਲਣ। ਇੱਕ ਹਿਲਣ ਵਾਲੀ ਐਨੀਮੇਸ਼ਨ ਬਣਾਓ ਜੋ ਹਰ ਪੌਦੇ ਨੂੰ ਹੌਲੀ-ਹੌਲੀ (2-3 ਡਿਗਰੀ) ਖੱਬੇ ਅਤੇ ਸੱਜੇ ਵੱਲ ਘੁਮਾਉਂਦਾ ਹੈ, 3-4 ਸਕਿੰਟ ਦੀ ਮਿਆਦ ਨਾਲ। ਇਹ ਐਨੀਮੇਸ਼ਨ ਅਨੰਤ ਚਲਦੀ ਰਹੇ ਅਤੇ ਕੁਦਰਤੀ ਹਿਲਣ ਲਈ ਇੱਕ ਈਜ਼ਿੰਗ ਫੰਕਸ਼ਨ ਹੋਵੇ। [Agent ਮੋਡ](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 ਹੁਨਰ ਦੀ ਜਾਂਚ ਕਰੋ ### ਵਾਧੂ ਸਿੱਖਣ CSS ਮੂਲ ਧਾਰਨਾਵਾਂ ਲਈ ਵਿਸਤ੍ਰਿਤ ਸਿੱਖਣ ਲਈ, ਇਹ Microsoft Learn ਮੋਡਿਊਲ ਪੂਰਾ ਕਰੋ: [Style your HTML app with 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) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।