Lesson – 62 : CSSના Concepts અને HTML માં CSS કેવી રીતે લાગુ કરવો
વેબ ડિઝાઇન અને વેબ ડેવલપમેન્ટમાં 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 બનાવી શકીએ છીએ.
