વેબ ડિઝાઇન અને વેબ ડેવલપમેન્ટમાં CSS (Cascading Style Sheets) ખૂબ જ મહત્વનો ભાગ ભજવે છે. HTML વેબ પેજની રચના (Structure) બનાવે છે, જ્યારે CSS તેને સુંદર, આકર્ષક અને વ્યવસ્થિત દેખાવ આપે છે. એટલે કે, CSS વગર વેબસાઈટનું ડિઝાઇનિંગ અધૂરું છે.
✔️ CSS શું છે?
CSS એટલે Cascading Style Sheets, જે HTML Elements ને સ્ટાઇલ આપવા માટે વપરાતી ભાષા છે. જેમ કે:
રંગ (Color)
ફૉન્ટ (Fonts)
Layout (ચોકઠા)
Margins & Padding
Background
Border
Animation & Transition
વગેરે…
CSS ની મદદથી વેબ પેજ વધુ પ્રોફેશનલ અને responsive બને છે.
✔️ CSS કેમ જરૂરી છે?
HTML માત્ર Page Structure પૂરું પાડે છે. પરંતુ CSS:
વેબપેજને સુંદર, આકર્ષક અને સુવિધાજનક બનાવે છે
અનેક પેજ પર એકસરખી ડિઝાઇન (Consistency) જાળવી રાખે છે
ડિઝાઇનને HTML થી અલગ રાખે છે
વેબસાઈટને સરળતાથી maintain કરી શકાય તેવું બનાવે છે
Responsive Design માટે મદદરૂપ છે
આથી, HTML અને CSS બંને સાથે મળીને જ વેબસાઈટ પૂરું બને છે.
👉 CSSનાં મુખ્ય Concepts
1. Selectors (સિલેક્ટર્સ)
Selectors નક્કી કરે છે કે કયાં HTML Element પર સ્ટાઇલ અપ્લાય કરવી.
Types of Selectors:
Element Selector — p, h1, div
Class Selector — .classname
ID Selector — #idname
Group Selector — h1, p
Universal Selector — *
2. Properties (ગુણધર્મો)
CSS માં Elements ને સ્ટાઇલ આપવા માટે વિવિધ Properties નો ઉપયોગ થાય છે.
ઉદાહરણ:
color
background-color
font-size
margin
padding
border
width / height
3. Values (મૂલ્યો)
Properties સાથે Values જોડીને જ સ્ટાઇલ બને છે.
ઉદાહરણ:
4. Box Model (મહત્વપૂર્ણ Concept)
HTML Elements ને CSS Box Model તરીકે સમજવામાં આવે છે:
Content
Padding
Border
Margin
Layout બનાવવા માટે Box Model ખૂબ જ મહત્વપૂર્ણ છે.
👉 HTML માં CSS કેવી રીતે Apply કરવી?
HTML માં CSS Three Ways થી Apply કરી શકાય:
1. Inline CSS
HTML Element અંદર સીધો style attribute નો ઉપયોગ.
2. Internal CSS
HTML ફાઇલના <head> section માં <style> tag અંદર લખાય છે.
3. External CSS (સર્વશ્રેષ્ઠ પદ્ધતિ)
અલગ .css ફાઇલ બનાવીને HTML સાથે link કરવી.
style.css
HTML માં લિંક કરવાનો કોડ
આ પદ્ધતિ professional વેબસાઈટ્સમાં બહુ વપરાય છે કારણ કે Maintain, Update અને Reuse કરવું સરળ બને છે.
CSS વેબ ડિઝાઇનનો હ્રદય છે. HTML વેબપેજની રચના બનાવે છે અને CSS તેને જીવીત રૂપ આપે છે. CSS વડે અમે રંગ, ફૉન્ટ, લેઆઉટ, બોર્ડર, એનિમેશન વગેરે બદલીને વેબપેજને વધુ સુંદર, Responsive અને User-Friendly બનાવી શકીએ છીએ.