Theory
દોહરાવાતા કામનું દુઃસ્વપ્ન
કલ્પો કે તમે હમણાં જ તમારા campus ના placements માટે એક સાફ ત્રણ પાનાંની portfolio ની website બનાવી પૂરી કરી. તમે આ પાનાં પર દસ project નાં headings ઉમેર્યાં, બધાં તેજસ્વી neon ભૂરા રંગથી style કરેલાં. અચાનક, તમારા professor તમને કાલ સવાર પહેલાં બધાં headings નો રંગ ઘેરો જાંબલી કરવાનું કહે છે. શું તમે દરેક file ખોલીને દસેદસ tags હાથે એક પછી એક update કરશો? અને જો તમારી site વધીને પચાસ પાનાંની થાય તો? એક જ cockpit માંથી તમારી ડિઝાઇન નિયંત્રિત કરવાનો કોઈ બહેતર રસ્તો હોવો જ જોઈએ.
Theory
ચિઠ્ઠીઓ, નોટિસ, અને મુખ્ય નકશો
તમારી website ના layout ને એક બહુમાળી student ના hostel જેવું વિચારો. Inline styling એટલે એક નાની ચીકણી ચિઠ્ઠી પર રંગની સૂચનાઓ લખીને એને સીધી એક ઓરડાની અંદરની એક ચોક્કસ ખુરશી પર ચોંટાડવી. Document wide styling એટલે એક જ flat ના પ્રવેશદ્વારે એક જાહેરાતનું નોટિસ બોર્ડ મૂકવું, જે માત્ર એ flat ની અંદરનું બધું નિયંત્રિત કરે. External styling એટલે વોર્ડનની કચેરીની અંદર એક મુખ્ય નકશાનો document બનાવવો: ત્યાં એક લીટી બદલો, અને આખા hostel ના સંકુલના દરેક ઓરડામાં તરત update થાય.
Theory
Style લગાવવાના ત્રણ સ્તંભ
CSS3 માં, તમે ત્રણ અલગ અભિગમો વાપરીને તમારાં elements પર ડિઝાઇનના નિયમો લગાવી શકો છો. પહેલું, inline style એક અલગ HTML tag ની અંદર સીધું style નું attribute વાપરે છે. બીજું, document wide style (જેને internal CSS પણ કહેવાય છે) એક પાનાના <head> વિભાગની અંદર મુકાયેલા <style> element ની અંદર નિયમો જડે છે. ત્રીજું, external style બધા નિયમો એક તદ્દન અલગ .css file માં મૂકે છે અને <link> tag વાપરીને એને તમારા HTML documents સાથે જોડે છે. Browser એક કડક cascade ની અગ્રતાના ક્રમ વાપરીને style ના ટકરાવ ઉકેલે છે.
At a glance
CSS styling લગાવવાની પદ્ધતિઓ અને એમનાં લક્ષણોની સરખામણી.
| પદ્ધતિ | Syntax નું સ્થાન | વ્યાપ | Cascade ની અગ્રતા |
|---|---|---|---|
| Inline Style | ચોક્કસ HTML tag ના attribute ની અંદર | માત્ર એક જ element | સર્વોચ્ચ (બીજાં પર ભારે પડે છે) |
| Document-wide | <head> માંના <style> tag ની અંદર | માત્ર એક જ webpage | મધ્યમ |
| External Style | <link> tag સાથે અલગ .css file | આખી website | સૌથી નીચી |
Practical
Demonstrating the Three Application Methods
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
<!-- External style: lowest priority, whole site -->
<link rel="stylesheet" href="styles.css">
<!-- Document-wide (internal) style: this page only -->
<style>
h1 { color: darkblue; }
p { color: gray; }
</style>
</head>
<body>
<h1>Project Showcase</h1>
<!-- Inline style: highest priority, this element only -->
<p style="color: red;">This specific text ignores other rules.</p>
</body>
</html>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Quiz
એક external stylesheet h1 { color: green; } વ્યાખ્યાયિત કરે છે, એક document-wide block h1 { color: blue; } વ્યાખ્યાયિત કરે છે, અને એક અલગ tag <h1 style="color: red;"> તરીકે લખાયેલું છે. Browser માં heading કયા રંગમાં દેખાશે?
- લીલો
- ભૂરો
- લાલ
- Style ના ટકરાવના કારણે લખાણ અદૃશ્ય થઈ જશે
Show the answer
લાલ
Inline styles ની cascade ની અગ્રતા સર્વોચ્ચ હોય છે. કારણ કે style નું attribute સીધું HTML element પર બેસે છે, એ document-wide style ના blocks અને external stylesheets બંને પર ભારે પડે છે, એટલે લાલ રંગ જીતે છે.
Theory
પગલું દર પગલું Cascade નું નિરાકરણ
ચાલો ટ્રેસ કરીએ કે styles ટકરાય ત્યારે browser લખાણનો રંગ કેવી રીતે દોરે છે. ધારો કે તમારી external CSS file તમારા portfolio ના body ના લખાણ માટે p { color: black; } કહે છે. પાનું બે પર, તમારે બધા ફકરા ભૂખરા દેખાડવા છે, તેથી તમે p { color: gray; } કહેતો એક document wide block ઉમેરો છો. છેલ્લે, એક ખાસ ચેતવણીના ફકરા માટે, તમે tag માં સીધું style="color: red;" લખો છો. પગલું 1: Browser external sheet load કરે છે, લખાણ કાળું કરતાં. પગલું 2: Document wide નિયમ એના પર ભારે પડે છે, એ પાનાનું લખાણ ભૂખરું કરતાં. પગલું 3: Inline attribute અંતિમ અગ્રતા લે છે, માત્ર એ ચોક્કસ ચેતવણીનું લખાણ લાલ કરતાં.
Think first
વહેંચાયેલી Styles નો પડકાર
તમારી પાસે main.css નામની એક external file છે જે તમારી આખી site માટે ઘેરી પશ્ચાદભૂમિ ગોઠવે છે. મનમાં આંકો કે જો તમે તમારા નવા contact ના webpage પર <link> tag સામેલ કરવાનું ભૂલી જાઓ, પણ એને બદલે fonts માટે એક internal style નો block લખો, તો શું થાય. Tap કરતાં પહેલાં વિચારો.
Show the answer
Contact નું પાનું એનું ઘેરી પશ્ચાદભૂમિનું layout સંપૂર્ણપણે ગુમાવશે. કારણ કે external file ક્યારેય જોડાઈ જ નથી, browser પાસે એ પશ્ચાદભૂમિના નિયમો લાવવાનો કોઈ રસ્તો નથી, એટલે પાનું એક default સફેદ પશ્ચાદભૂમિ સાથે load થશે અને માત્ર સ્થાનિક internal font ની styles જ રાખશે.
Watch out
વ્યવહારુ Lab ના ઝડપી ઉપાયનો ફાંદો
University ની lab પરીક્ષાઓ દરમિયાન, students ઘણી વાર ગભરાઈને દરેકે દરેક element માટે inline styles વાપરે છે કારણ કે એ તરત પરિણામ આપે છે. આ marks ગુમાવતી એક ગંભીર ભૂલ છે. Inline styles CSS નો આખો હેતુ જ હરાવી દે છે, જે માળખાને રજૂઆતથી અલગ પાડવાનો છે. એ ગંદો, ન સંભાળી શકાય એવો code બનાવે છે જે ભવિષ્યના ફેરફારોને જીવતું દુઃસ્વપ્ન બનાવી દે છે. હંમેશા external stylesheets ને અગ્રતા આપો, અને inline styling માત્ર ત્યારે વાપરો જ્યારે અપવાદરૂપ, એક જ element ને બદલવા એકદમ જરૂરી હોય.
Theory
ઉદ્યોગનાં ધોરણો અને ભવિષ્યનાં Semesters
વ્યાવસાયિક web development માં અને તમારા આવનારા Semester 3 ના projects માં, external stylesheets બિનચર્ચાસ્પદ છે. મોટી કંપનીઓ modular external CSS ની systems વાપરીને હજારો પાનાં સંભાળે છે. અત્યારે link ના માળખા પર પ્રભુત્વ મેળવવું ખાતરી કરે છે કે તમારો code સાફ, વિસ્તરી શકે એવો, અને પછીના semesters માં Tailwind કે Bootstrap જેવાં અદ્યતન ડિઝાઇનનાં માળખાં માટે તૈયાર રહે.
Summary
Key takeaways
- Inline styles style ના attribute વાપરીને સીધી HTML tags ની અંદર જાહેર થાય છે અને એક જ element ને નિશાન બનાવે છે.
- Document wide styles head element ની અંદર રહે છે અને એક જ આખા પાનાનું layout નિયંત્રિત કરે છે.
- External stylesheets અલગ files માં રહે છે અને અનેક webpages પર વૈશ્વિક ડિઝાઇનની સુસંગતતા આપે છે.
- Browser style ના ટકરાવ cascade ની અગ્રતા પ્રમાણે ઉકેલે છે, જ્યાં inline styles હંમેશા external નિયમો પર ભારે પડે છે.
- Memory Hook: Inline એક જ જગ્યા નિશાન બનાવે છે, internal એક જ પ્લોટના નિયમો, external આખા સમૂહને નિયંત્રે છે.