સીએસએસ શું છે અને તેનો ઉપયોગ ક્યાં થાય છે?

કેસ્કેડીંગ સ્ટાઇલ શીટ્સ શું છે?

વેબસાઈટોમાં સંખ્યાબંધ વ્યક્તિગત ટુકડાઓનો સમાવેશ થાય છે, જેમાં ચિત્રો, ટેક્સ્ટ અને વિવિધ દસ્તાવેજોનો સમાવેશ થાય છે. આ દસ્તાવેજોમાં એવા લોકોનો સમાવેશ થતો નથી કે જે પીડીએફ ફાઇલો જેવા વિવિધ પાનાંથી જોડાયેલા હોઇ શકે છે, પરંતુ તે પૃષ્ઠોને રચવા માટે ઉપયોગમાં લેવાતા દસ્તાવેજો જેમ કે પૃષ્ઠના બંધારણ અને CSS (કેસ્કેડીંગ સ્ટાઇલ શીટ) દસ્તાવેજો નક્કી કરવા માટે HTML દસ્તાવેજો. એક પાનું દેખાવ રાખે છે. આ લેખ, સીએસએસમાં ઘોષણા કરશે, તે કઈ છે તે આવરે છે અને આજે વેબસાઇટ પર તેનો ઉપયોગ ક્યાં થાય છે

એક સીએસએસ ઇતિહાસ પાઠ

CSS પ્રથમ વેબ વિકાસકર્તાઓ માટેના વેબપેક્સના દૃશ્ય દેખાવને વ્યાખ્યાયિત કરવા માટેનો એક માર્ગ તરીકે 1997 માં વિકસાવવામાં આવ્યો હતો. તે વેબ વ્યાવસાયિકોને વિઝ્યુઅલ ડિઝાઇનમાંથી વેબસાઇટના કોડની સામગ્રી અને માળખું અલગ કરવાની મંજૂરી આપવાનો હેતુ હતો, જે આ સમય પહેલાં શક્ય ન હતું.

માળખા અને શૈલીની અલગતા એ HTML ને વધુ કાર્ય કરવા માટે પરવાનગી આપે છે કે જે મૂળ રૂપે તે સામગ્રી પર આધારિત હતી - પૃષ્ઠની ડિઝાઇન અને લેઆઉટ વિશે ચિંતા કર્યા વગર, સામગ્રીનું માર્કઅપ, જે કંઈક સામાન્ય રીતે "દેખાવ અને લાગણી" તરીકે ઓળખાય છે પાનું

2000 ની સાલ સુધી સીએસએસ લોકપ્રિયતામાં નથી મેળવી શક્યો, જ્યારે વેબ બ્રાઉઝર્સ આ માર્કઅપ લેંગ્વેજના મૂળભૂત ફૉન્ટ અને રંગના પાસાં કરતાં વધુ ઉપયોગ કરવાનું શરૂ કર્યું. આજે, તમામ આધુનિક બ્રાઉઝર્સમાં CSS સ્તર 1, મોટા ભાગના CSS સ્તર 2, અને CSS સ્તર 3 ના મોટાભાગના પાસાંઓ સપોર્ટ કરે છે. જેમ જેમ CSS વિકસાવવાનું ચાલુ રહે છે અને નવી શૈલીઓ રજૂ કરવામાં આવે છે, વેબ બ્રાઉઝરોએ તે બ્રાઉઝર્સમાં નવા સીએસએસ સપોર્ટ લાવવા માટે મોડ્યુલ અમલમાં લાવવાનું શરૂ કર્યું છે અને વેબ ડિઝાઇનરો સાથે કામ કરવા માટે શક્તિશાળી નવી સ્ટાઇલ ટૂલ્સ આપો.

ભૂતકાળમાં (ઘણા) વર્ષો, ત્યાં વેબ ડિઝાઇનરોની પસંદગી કરવામાં આવી હતી જેણે વેબ સાઇટ્સના ડિઝાઇન અને વિકાસ માટે CSS નો ઉપયોગ કરવાનો ઇનકાર કર્યો હતો, પરંતુ તે પ્રથા આજે ઉદ્યોગમાંથી પસાર થઈ ગયો છે. સીએસએસ હવે વેબ ડીઝાઇનમાં વ્યાપક ધોરણે ઉપયોગમાં લેવાતું પ્રમાણભૂત છે અને તમે આ ઉદ્યોગમાં ઓછામાં ઓછી એક મૂળભૂત સમજ ન ધરાવતા આજે ઉદ્યોગમાં કામ કરતા કોઈને શોધવા માટે કડક દબાવવામાં આવશે.

સીએસએસ એક સંક્ષેપ છે

પહેલેથી જ જણાવ્યા મુજબ, સી.એસ.એસ. (CSS) શબ્દ "કેસ્કેડીંગ સ્ટાઇલ શીટ" માટે વપરાય છે. ચાલો આ શબ્દસમૂહને થોડો નીચે તોડીએ અને વધુ સમજાવું કે આ દસ્તાવેજો શું કરે છે.

"સ્ટાઇલ શીટ" શબ્દનો અર્થ દસ્તાવેજ (જેમ કે એચટીએમએલ, સી.એસ.એસ. ફાઇલો ખરેખર માત્ર લખાણ દસ્તાવેજો છે જે વિવિધ પ્રોગ્રામો સાથે સંપાદિત કરી શકાય છે) છે. ઘણાં વર્ષોથી દસ્તાવેજ ડિઝાઇન માટે સ્ટાઇલ શીટ્સનો ઉપયોગ કરવામાં આવ્યો છે તે લેઆઉટ માટેના તકનીકી સ્પષ્ટીકરણો છે, છાપે અથવા ઑનલાઇન. પ્રિન્ટ ડિઝાઇનરોએ લાંબા સમય સુધી શૈલી શીટ્સનો ઉપયોગ કરવા માટે વીમા ઉતારો છો કે તેમની ડિઝાઇન તેમના સ્પષ્ટીકરણો માટે બરાબર છાપવામાં આવે છે. વેબ પેજ માટે સ્ટાઇલ શીટ એ જ હેતુની સેવા આપે છે, પરંતુ વેબ બ્રાઉઝરને કહેવાની કાર્યક્ષમતા સાથે પણ દસ્તાવેજને કેવી રીતે રેન્ડર કરવું તે બતાવવામાં આવે છે. આજે, CSS સ્ટાઇલશીટ્સ વિવિધ ઉપકરણો અને સ્ક્રીન માપો માટે પૃષ્ઠને જુએ તે રીતે બદલવા માટે મીડિયા ક્વેરીઝનો ઉપયોગ કરી શકે છે. આ અતિ મહત્વનું છે કારણ કે તે એક એચટીએમએલ દસ્તાવેજને તેની ઍક્સેસ કરવા માટે વપરાયેલા સ્ક્રીન પ્રમાણે અલગ રીતે રેન્ડર કરવા માટે પરવાનગી આપે છે.

કાસ્કેડ "કેસ્કેડીંગ સ્ટાઇલ શીટ" શબ્દનો ખરેખર વિશિષ્ટ ભાગ છે. એક વેબ સ્ટાઇલ શીટ તે શીટમાં શ્રેણીબદ્ધ શૈલીઓ દ્વારા કાસ્કેડ કરે છે, જેમ કે ધોધ પર નદીની જેમ. નદીમાં પાણી ધોધમાં તમામ ખડકોને ફટકાવે છે, પરંતુ તળિયેની માત્રા તે જ અસર કરે છે જ્યાં પાણી વહે છે. વેબસાઈટ સ્ટાઇલ શીટ્સમાં કાસ્કેડનો આ જ વાત સાચી છે.

દરેક વેબ પૃષ્ઠ ઓછામાં ઓછી એક શૈલી શીટથી પ્રભાવિત થાય છે, પછી ભલે વેબ ડીઝાઈનર કોઈપણ સ્ટાઇલ લાગુ ન કરે. આ શૈલી શીટ વપરાશકર્તા એજન્ટ સ્ટાઇલ શીટ છે - જે ડિફૉલ્ટ શૈલીઓ તરીકે પણ ઓળખાય છે કે જે વેબ બ્રાઉઝર પૃષ્ઠ પ્રદર્શિત કરવા માટે ઉપયોગ કરશે જો અન્ય સૂચનો પૂરા પાડવામાં ન આવે. ઉદાહરણ તરીકે, ડિફૉલ્ટ હાઇપરલિંક દ્વારા વાદળીમાં રીતની શૈલી છે અને તે રેખાંકિત છે. તે શૈલીઓ વેબ બ્રાઉઝરની ડિફૉલ્ટ શૈલી શીટથી આવે છે જો વેબ ડીઝાઈનર અન્ય સૂચનાઓ પ્રદાન કરે છે, તેમ છતાં, બ્રાઉઝરને જાણ કરવાની આવશ્યકતા રહેશે કે કઈ સૂચનો પ્રાધાન્યતા ધરાવે છે. બધા બ્રાઉઝર્સ પાસે તેમની પોતાની ડિફૉલ્ટ શૈલીઓ છે, પરંતુ તેમાંથી ઘણા ડિફોલ્ટ્સ (જેમ કે વાદળી રેખાંકિત ટેક્સ્ટ લિંક્સ) બધા અથવા મોટાભાગના મુખ્ય બ્રાઉઝર્સ અને સંસ્કરણોમાં શેર કરવામાં આવે છે.

મારા ડિફૉલ્ટ બ્રાઉઝરનાં અન્ય એક ઉદાહરણ માટે, મારા વેબ બ્રાઉઝરમાં, મૂળભૂત ફોન્ટ " ટાઇમ્સ ન્યૂ રોમન " નું કદ 16 માં દર્શાવવામાં આવ્યું છે. તેમ છતાં, હું જે પૃષ્ઠોની મુલાકાત કરું છું તે કોઈપણ ફૅન્ટેપ કુટુંબ અને કદમાં પ્રદર્શિત નથી, તેમ છતાં આ એટલા માટે છે કે કાસ્કેડ વ્યાખ્યાયિત કરે છે કે બીજી સ્ટાઇલ શીટ્સ, જે ડિઝાઇનર્સ દ્વારા પોતાને નક્કી કરવામાં આવે છે, ફોન્ટ કદ અને પરિવારને ફરીથી નિર્ધારિત કરવા માટે , મારા વેબ બ્રાઉઝરનાં ડિફોલ્ટ્સને ઓવરરાઇડ કરે છે. વેબ પૃષ્ઠ માટે તમે બનાવેલ કોઈપણ શૈલીની શીટ્સ પાસે બ્રાઉઝરની ડિફૉલ્ટ શૈલીની સરખામણીમાં વધુ વિશિષ્ટતા હશે, જેથી તે ડિફૉલ્ટ્સ જ લાગુ થશે જો તમારી શૈલી શીટ તેમને ઓવરરાઇડ કરતી નથી. જો તમે લિંક્સ વાદળી અને અધોરેખિત કરવા માંગતા હો, તો તમારે ડિફોલ્ટથી કંઇપણ કરવાની જરૂર નથી, પરંતુ જો તમારી સાઇટની CSS ફાઇલ જણાવે છે કે લિંક્સ લીલા હોવી જોઈએ, તો તે રંગ ડિફોલ્ટ વાદળી પર ફરીથી લખશે. નીચે લીટી આ ઉદાહરણમાં રહેશે, કારણ કે તમે અન્યથા સ્પષ્ટ નથી કર્યું.

સીએસએસ ક્યાં વપરાય છે?

વેબ બ્રાઉઝરની સરખામણીમાં અન્ય માધ્યમોમાં જોઈ શકાય તે રીતે વેબ પૃષ્ઠોને કેવી રીતે દેખાવા તે CSS વ્યાખ્યાયિત કરવા માટે પણ ઉપયોગ કરી શકે છે. ઉદાહરણ તરીકે, તમે પ્રિન્ટ સ્ટાઇલ શીટ બનાવી શકો છો જે વેબ પૃષ્ઠ કેવી રીતે પ્રિન્ટ કરવું તે નિર્ધારિત કરશે. કારણ કે નેવિગેશન બટન્સ અથવા વેબ સ્વરૂપો જેવી વેબ પેજ આઇટમ્સને પ્રિન્ટેડ પેજ પર કોઈ હેતુ નથી, કારણ કે પ્રિન્ટ સ્ટાઇલ શીટનો ઉપયોગ તે વિસ્તારોને "બંધ કરો" જ્યારે કોઈ પૃષ્ઠ છાપવામાં આવે ત્યારે થાય છે. ઘણા સાઇટ્સ પર એક સામાન્ય પ્રથા ન હોવા છતાં, પ્રિન્ટ સ્ટાઇલ શીટ્સ બનાવવાનો વિકલ્પ શક્તિશાળી અને આકર્ષક છે (મારા અનુભવમાં - મોટાભાગના વેબ પ્રોફેશનલ્સ આ ફક્ત એટલા માટે નથી કારણ કે બજેટનો સાઇટનો અવકાશ આ વધારાના કાર્ય માટે નથી કહેતો ).

શા માટે સીએસએસ મહત્વપૂર્ણ છે?

સીએસએસ સૌથી શક્તિશાળી સાધનો પૈકીનું એક છે જે વેબ ડીઝાઈનર જાણી શકે છે કારણ કે તેની સાથે તમે વેબસાઇટની સંપૂર્ણ દ્રશ્ય દેખાવને અસર કરી શકો છો. સારી રીતે લખાયેલ સ્ટાઇલ શીટ્સ ઝડપથી અપડેટ થઈ શકે છે અને સાઇટ્સને જે સ્ક્રીન પર દૃષ્ટિની અગ્રતા આપવામાં આવે છે તે બદલવા માટે પરવાનગી આપે છે, જે બદલામાં મૂલ્ય અને મુલાકાતીઓને ધ્યાન આપે છે, જે કોઈ પણ ફેરફારોને અંતર્ગત HTML માર્કઅપ પર કરવાની જરૂર નથી.

સીએસએસનો મુખ્ય પડકાર એ છે કે શીખવા માટે થોડો સમય છે - અને દરરોજ બદલાતા બ્રાઉઝર્સ સાથે, જે આજે સારી રીતે કામ કરે છે, કાલે કાલે અર્થમાં ન બની શકે કારણ કે નવી શૈલીઓ સપોર્ટેડ થઈ જાય છે અને અન્યને છોડવામાં આવે છે અથવા એક કારણ અથવા અન્ય તરફ તરફેણમાં આવતા નથી .

કારણ કે CSS કાસ્કેડ કરી શકે છે અને ભેગા કરી શકે છે અને અલગ બ્રાઉઝર્સ ડિરેક્ટ્સને અલગ રીતે કેવી રીતે અર્થઘટન અને અમલ કરી શકે છે તે અંગે વિચારણા કરી શકે છે, સી.એસ.એસ. સાદી HTML થી માસ્ટર સુધી વધુ મુશ્કેલ બની શકે છે. સીએસએસ એ રીતે બ્રાઉઝર્સમાં પણ ફેરફાર કરે છે કે HTML ખરેખર નથી. એકવાર તમે CSS નો ઉપયોગ શરૂ કરી લો તે પછી, તમે જોશો કે સ્ટાઇલ શીટ્સની શક્તિનો ઉપયોગ કરવાથી તમે કેવી રીતે વેબ પૃષ્ઠો ગોઠવી શકો છો અને તેમના દેખાવ અને લાગણીને કેવી રીતે વ્યાખ્યાયિત કરી શકો છો તે વિશે અવિશ્વસનીય સુગમતા આપશે. રસ્તામાં, તમે શૈલીઓ અને અભિગમોના "યુક્તિઓના બેગ" ભેગા કરો છો જે ભૂતકાળમાં તમારા માટે કામ કર્યું છે અને તમે ભવિષ્યમાં નવા વેબપૃષ્ઠોને બનાવતા હોવાથી તમે ફરી ચાલુ થઈ શકો છો.

જેનિફર કિનાન દ્વારા મૂળ લેખ. 7/5/17 ના રોજ જેરેમી ગીરર્ડ દ્વારા સંપાદિત,