Theory
કાળું-ધોળું Portfolio
તમે તમારા online portfolio માટે સંપૂર્ણ HTML tags લખવામાં કલાકો ગાળ્યા છે. તમારી પાસે headings, ફકરા, અને એક સાફ layout છે. પણ જ્યારે તમે એ browser માં load કરો, બધું જ બીજા દરેક student ના project જેવું એકસરખું દેખાય છે, કોરી સફેદ પશ્ચાદભૂમિ પર કંટાળાજનક કાળું લખાણ. જો દરેક element બિલકુલ એ જ સાદો font વાપરે, તો તમે એક recruiter ને અટકાવીને તમારું કામ કેવી રીતે નોંધાવો? અને આપણે તમારા HTML code નું માળખું બગાડ્યા વગર તમારા portfolio ને style કેવી રીતે કરીએ?
Theory
બાંધકામની જગ્યા અને રંગની ડોલ
તમારા portfolio ના HTML ને એક ઘરના concrete ના પાયા, થાંભલા, અને ઈંટોની દીવાલો જેવું વિચારો. એ નક્કી કરે છે કે ઓરડા ક્યાં છે, પણ કાચું અને અધૂરું દેખાય છે. Cascading Style Sheets (CSS) એ interior designer ની જેમ કામ કરે છે. નવી દીવાલો બાંધવાને બદલે, CSS રંગના પીંછી, wallpaper, અને લાઈટનાં ફિટિંગ લાવે છે. એ હયાત ઈંટોની દીવાલોને નિશાન બનાવે છે અને બહારથી એમનો રંગ કે પોત બદલે છે, માળખાના નકશાને રજૂઆતથી સંપૂર્ણપણે અલગ રાખતાં.
Theory
CSS નું માળખું સમજવું
Cascading Style Sheets (CSS) એ એક style sheet ની ભાષા છે જે HTML માં લખાયેલા એક document ની રજૂઆત વર્ણવવા વપરાય છે. એક CSS નો નિયમ એક selector અને એક declaration block નો બનેલો છે. Selector તમે જે HTML element ને style કરવા માંગો છો એના તરફ ઈશારો કરે છે. Declaration block માં અર્ધવિરામથી છૂટી પડેલી એક કે વધુ declarations હોય છે, જ્યાં દરેક declaration માં એક property નું નામ અને એક value હોય છે, જે colon થી છૂટાં પડે છે.
At a glance
એક standard CSS ના નિયમના expression નું શરીરરચનાશાસ્ત્ર.
| Syntax નો ઘટક | ઉદાહરણ | હેતુ |
|---|---|---|
| Selector | h1 | Style કરવાના ચોક્કસ HTML element ને નિશાન બનાવે છે. |
| Property | color | તમે જે લક્ષણ બદલવા માંગો છો એ નિર્દિષ્ટ કરે છે, જેમ કે લખાણનો રંગ. |
| Value | blue | Property ને ચોક્કસ ગોઠવણ કે દેખાવ સોંપે છે. |
| Declaration | color: blue; | વાંકા કૌંસની અંદર એક property અને value ને જોડે છે. |
Practical
Styling the Main Portfolio Heading
/* Target the main heading of your portfolio page */
h1 {
color: darkblue;
font-size: 32px;
text-align: center;
}Quiz
Code ની આ લીટી જુઓ: p { color: red; }. એક university ની પરીક્ષામાં આ statement ના 'color' ભાગને કયો શબ્દ વર્ણવે છે?
- Selector
- Value
- Property
- Declaration block
Show the answer
Property
CSS ની syntax માં, color એ એક property છે. p tag એ selector છે, red એ value છે, અને વાંકા કૌંસની અંદરનું આખું જોડાણ declaration block બનાવે છે.
Theory
CSS નાં Versions નો વિકાસ
આધુનિક web ના layouts ને support કરવા CSS અલગ versions દ્વારા વિકસ્યું છે:
- CSS1 (1996): fonts, રંગો, અને margins જેવી પાયાની properties રજૂ કરી.
- CSS2 (1998): absolute positioning અને media ના પ્રકારો માટે support ઉમેર્યો.
- CSS3 (1999 થી અત્યાર સુધી): Specification ને Flexbox, Grid, borders, અને animations જેવા સ્વતંત્ર modules માં વહેંચ્યું, જે એક તદ્દન નવા version ના પ્રકાશનની રાહ જોયા વગર સતત updates શક્ય બનાવે છે.
Think first
અર્ધવિરામનું માનસિક મૂલ્યાંકન
મનમાં આગાહી કરો કે જો તમે બે declarations વાળો એક CSS block લખો પણ એમની વચ્ચે અર્ધવિરામ મૂકવાનું ભૂલી જાઓ તો શું થાય. Tap કરતાં પહેલાં વિચારો.
Show the answer
Browser styles parse કરવામાં નિષ્ફળ જશે. એ બંને declarations ને એક જ અમાન્ય command તરીકે જોશે અને એમને સંપૂર્ણપણે અવગણશે, તમારા webpage ના ઘટકોને સંપૂર્ણપણે style વગરના છોડતાં.
Watch out
ખૂટતો અર્ધવિરામ અને Colon નો ગૂંચવાડો
વ્યવહારુ lab નાં સત્રોમાં શરૂઆતના લોકો દ્વારા થતી એક વિનાશક ભૂલ છે colons અને અર્ધવિરામ ગૂંચવવા, કે HTML ના attributes ની જેમ બરાબરના ચિહ્નો વાપરવા. color = red; કે color; red: લખવાથી તમારી style sheets સંપૂર્ણપણે નકામી થઈ જશે. હંમેશા કડક ભાત યાદ રાખો: property ના નામ પછી એક colon વાપરો, અને આગલી લીટીએ જતાં પહેલાં દરેક declaration ને એક અર્ધવિરામથી બંધ કરો!
Formula
CSS Syntax ના પ્રશ્નો માટેનું સૂત્ર
જ્યારે theory ની પરીક્ષામાં CSS ની syntax સમજાવવાનું કહેવાય, મહત્તમ marks માટે આ ત્રણ અલગ ભાગ રજૂ કરો:
- 1. માળખાનું ઉદાહરણ: h1 { color: red; } જેવો એક નમૂનાનો નિયમ લખો અને selector, property, અને value ને સ્પષ્ટપણે નિશાન કરો.
- 2. વ્યાખ્યા: એક rule set વ્યાખ્યાયિત કરો અને સમજાવો કે વાંકા કૌંસ declarations ને કેવી રીતે જૂથબદ્ધ કરે છે.
- 3. વિભાજકો: સ્પષ્ટપણે જણાવો કે colons properties ને values થી છૂટાં પાડે છે, જ્યારે અર્ધવિરામ અલગ declarations ને છૂટાં પાડે છે.
Summary
Key takeaways
- CSS આધુનિક web development માં માળખાના layout ને દૃશ્ય રજૂઆતથી અલગ પાડે છે.
- એક CSS નો rule set એક selector ને વાંકા કૌંસમાં ઘેરાયેલા declaration block સાથે જોડે છે.
- Properties અને values colons થી વહેંચાય છે, જ્યારે અલગ declarations ને અર્ધવિરામ જોઈએ છે.
- CSS3 એક જ અખંડ પ્રકાશનને બદલે modular upgrades ના સંગ્રહ તરીકે કામ કરે છે.
- Memory Hook: Selectors element ને નિશાન બનાવે છે, colons સ્થિતિ ગોઠવે છે, અર્ધવિરામ દરવાજો બંધ કરે છે.