CSS(कॅस्केडिंग स्टाइल शीट्स) हा वेब डेव्हलपमेंटचा एक मूलभूत घटक आहे जो आपल्या वेबसाइटवरील HTML घटकांचे दृश्य स्वरूप नियंत्रित करण्यात महत्त्वपूर्ण भूमिका बजावतो. हे नियम आणि गुणधर्मांचा एक शक्तिशाली संच प्रदान करते जे घटक कसे प्रदर्शित केले जातात, स्वरूपित केले जातात आणि स्थानबद्ध केले जातात, जे तुम्हाला तुमच्या वेब पृष्ठांचे स्वरूप आणि अनुभव सानुकूलित करण्यास अनुमती देतात.
चला निवडकर्त्यांची संकल्पना समजून घेऊन सुरुवात करूया
स्टाइलसाठी विशिष्ट HTML घटकांना लक्ष्य करण्यासाठी निवडकांचा वापर केला जातो. सर्वात मूलभूत निवडकांपैकी एक घटक निवडक आहे, जो विशिष्ट HTML घटकाची सर्व उदाहरणे निवडतो.
उदाहरणार्थ, खालील CSS नियम दस्तऐवजातील सर्व परिच्छेदांना लक्ष्य करते:
p {
color: blue;
}
या उदाहरणात, p निवडकर्ता सर्व <p> घटक निवडतो आणि त्यांचा मजकूर रंग निळ्यावर सेट करतो.
दुसरा सामान्य निवडकर्ता वर्ग निवडकर्ता आहे
वर्ग समान वैशिष्ट्यांसह घटकांचे गट करण्यासाठी वापरले जातात. HTML घटकांना वर्ग नियुक्त करून, तुम्ही त्यांना एकत्रितपणे लक्ष्य आणि शैलीबद्ध करू शकता.
येथे एक उदाहरण आहे:
.blue-text {
color: blue;
}
n या प्रकरणात, .blue-text निवडकर्ता वर्गासह सर्व घटकांना लक्ष्य करतो blue-text आणि त्यांच्या मजकुरावर निळा रंग लागू करतो.
याव्यतिरिक्त, ID निवडकर्ता तुम्हाला विशिष्ट घटकाला त्याच्या अद्वितीय अभिज्ञापकाद्वारे लक्ष्य करण्याची परवानगी देतो. ID सामान्यत: पृष्ठावरील वैयक्तिक घटकांना नियुक्त केले जातात.
येथे एक उदाहरण आहे:
#header {
background-color: gray;
}
या उदाहरणात, #header निवडकर्ता घटक सह निवडतो ID header आणि त्यावर राखाडी पार्श्वभूमी रंग लागू करतो.
CSS च्या सिंटॅक्सकडे जाताना, प्रत्येक CSS नियमात एक निवडकर्ता आणि एक घोषणा ब्लॉक असतो.
डिक्लेरेशन ब्लॉक कुरळे ब्रेसेसमध्ये बंद आहे {} आणि त्यात एक किंवा अधिक घोषणा आहेत. घोषणांमध्ये मालमत्ता आणि त्याचे संबंधित मूल्य असते.
येथे एक उदाहरण आहे:
h1 {
font-size: 24px;
color: #333;
}
या कोड स्निपेटमध्ये, h1 निवडकर्ता सर्व <h1> घटक निवडतो आणि त्यांचा फॉन्ट आकार 24 पिक्सेल आणि मजकूराचा रंग गडद राखाडी(#333) वर सेट करतो.
या संपूर्ण मालिकेमध्ये, आम्ही विविध CSS गुणधर्म, निवडक आणि त्यांचे संयोजन एक्सप्लोर करू आणि स्पष्ट करू, ज्यामुळे तुम्हाला आकर्षक आणि सु-संरचित वेबसाइट तयार करता येतील. CSS आणि त्याची मूळ वाक्यरचना समजून घेतल्याने तुम्हाला तुमच्या वेब पेजेसच्या स्टाइलिंग पैलूंवर नियंत्रण ठेवण्यासाठी पाया मिळेल, अनन्य आणि वैयक्तिक वापरकर्ता अनुभवाची खात्री होईल. चला आत जाऊया आणि CSS च्या अमर्याद शक्यतांचा शोध घेऊया!