Theory
काली-सफ़ेद Portfolio
आपने अपनी online portfolio के लिए perfect HTML tags लिखने में घंटे बिताए हैं। आपके पास headings, paragraphs, और एक साफ़ layout है। पर जब आप इसे browser में load करते हैं, सब कुछ हर दूसरे student project जैसा दिखता है, एक बेरंग सफ़ेद background पर उबाऊ काला text। अगर हर element बिल्कुल एक जैसा सादा font इस्तेमाल करता है, आप एक recruiter को रुककर आपके काम पर ध्यान देने के लिए कैसे मजबूर करते हैं? हम आपके HTML code की structure बिगाड़े बिना आपकी portfolio कैसे style करें?
Theory
Construction Site और Paint Bucket
अपने portfolio के HTML को एक घर की concrete foundation, pillars, और brick walls की तरह सोचिए। यह परिभाषित करता है कि कमरे कहाँ हैं, पर raw और अधूरा दिखता है। Cascading Style Sheets (CSS) एक interior designer की तरह काम करते हैं। नई walls बनाने के बजाय, CSS paint brushes, wallpaper, और light fixtures लाता है। यह मौजूदा brick walls को target करता है और बाहर से उनका color या texture बदलता है, structural blueprint को presentation से पूरी तरह अलग रखते हुए।
Theory
CSS Architecture समझना
Cascading Style Sheets (CSS) एक style sheet language है जो HTML में लिखे एक document के presentation का वर्णन करने के लिए इस्तेमाल होती है। एक CSS rule में एक selector और एक declaration block होता है। selector उस HTML element की ओर point करता है जिसे आप style करना चाहते हैं। declaration block में एक या ज़्यादा declarations होती हैं semicolons से अलग की गईं, जहाँ हर declaration में एक property name और एक value शामिल हैं, एक colon से अलग किए।
At a glance
एक standard CSS rule expression की Anatomy।
| Syntax Component | Example | Purpose |
|---|---|---|
| Selector | h1 | style किए जाने वाले ख़ास HTML element को target करता है। |
| Property | color | वह attribute निर्दिष्ट करता है जिसे आप बदलना चाहते हैं, जैसे text color। |
| Value | blue | property को ख़ास setting या appearance assign करता है। |
| Declaration | color: blue; | curly braces के अंदर एक अकेली property और value जोड़ता है। |
Practical
Main Portfolio Heading Style करना
/* Target the main heading of your portfolio page */
h1 {
color: darkblue;
font-size: 32px;
text-align: center;
}Quiz
code की यह line देखिए: p { color: red; }। एक university exam में इस statement के 'color' हिस्से को कौन सा term describe करता है?
- Selector
- Value
- Property
- Declaration block
Show the answer
Property
CSS syntax में, color एक property है। p tag selector है, red value है, और curly braces के अंदर पूरा combo declaration block बनाता है।
Theory
CSS Versions का विकास
CSS आधुनिक web layouts का समर्थन करने के लिए अलग versions से गुज़रा है:
- CSS1 (1996): fonts, colors, और margins जैसी बुनियादी properties पेश कीं।
- CSS2 (1998): absolute positioning और media types के लिए समर्थन जोड़ा।
- CSS3 (1999 से अब तक): specification को Flexbox, Grid, borders, और animations जैसे स्वतंत्र modules में बाँटा, एक पूर्ण नए version release का इंतज़ार किए बिना निरंतर updates देते हुए।
Think first
Semicolons का Mental Evaluation
मन में अनुमान कीजिए क्या होता है अगर आप दो declarations वाला एक CSS block लिखते हैं पर उनके बीच एक semicolon रखना भूल जाते हैं। tap करने से पहले सोचिए।
Show the answer
browser styles parse करने में विफल होगा। यह दोनों declarations को एक अकेला invalid command मानेगा और उन्हें पूरी तरह नज़रअंदाज़ करेगा, आपके webpage components को पूरी तरह unstyled छोड़ते हुए।
Watch out
गुमशुदा Semicolon और Colon का भ्रम
practical lab sessions में beginners द्वारा की गई एक विनाशकारी ग़लती colons और semicolons मिलाना है, या HTML attributes की तरह equal signs इस्तेमाल करना है। color = red; या color; red: लिखना आपकी style sheets को पूरी तरह बेकार बना देगा। हमेशा सख़्त pattern याद रखिए: property name के बाद एक colon इस्तेमाल कीजिए, और अगली line पर जाने से पहले हर declaration को एक semicolon से बंद कीजिए!
Formula
CSS Syntax Questions का Formula
जब एक theory exam में CSS syntax समझाने को कहा जाए, अधिकतम marks के लिए ये तीन अलग हिस्से पेश कीजिए:
- 1. Structural Example: h1 { color: red; } जैसा एक sample rule लिखिए और selector, property, और value स्पष्ट रूप से लेबल कीजिए।
- 2. Definition: एक rule set परिभाषित कीजिए और समझाइए कि curly braces declarations को कैसे समूहित करते हैं।
- 3. Delimiters: स्पष्ट रूप से निर्दिष्ट कीजिए कि colons properties को values से अलग करते हैं, जबकि semicolons individual declarations को अलग करते हैं।
Summary
Key takeaways
- CSS आधुनिक web development में structural layout को visual presentation से अलग करता है।
- एक CSS rule set curly braces में बंद एक selector को एक declaration block से जोड़ता है।
- Properties और values colons से बँटे हैं, जबकि individual declarations को semicolons चाहिए।
- CSS3 एक अकेले monolithic release के बजाय modular upgrades के एक संग्रह के रूप में काम करता है।
- Memory Hook: Selectors element target करते हैं, colons state set करते हैं, semicolons gate बंद करते हैं।