सीएसएस स्टाइलिंग:

पेज सामग्री को आकार देने वाले उपकरण

• चौड़ाई: चौड़ाई } स्वचालित/प्रारंभिक

• ऊंचाई: ऊंचाई } न्यूनतम/अधिकतम

• विरासत: पहले से परिभाषित माप को बनाए रखता है

• मार्जिन: ऊपर/बाएं/दाएं/नीचे

• पैडिंग: आंतरिक और बाहरी सामग्री के बीच का स्थान

• बॉक्स आकार: तत्व को पूर्वनिर्धारित आकार में लौटाता है

सीएसएस में रंग

• आरजीबी: लाल, हरे और नीले रंग के टोन को परिभाषित करने के लिए 0 और 255 के बीच का मान, अल्पविराम से अलग किया जाता है। उदाहरण:

#rgb{
   color: rgb(250, 30, 70);
}

मान 250 लाल का प्रतिनिधित्व करता है, 30 हरे का प्रतिनिधित्व करता है, और 70 नीले का प्रतिनिधित्व करता है, जो इस मामले में परिणाम के समान होगा:

• आरजीबीए: आरजीबी के समान, लेकिन पारदर्शिता कारक जोड़ा गया है, जो 0 और 1 के बीच भिन्न होता है;
• HEX: आरजीबी के समान पैटर्न का पालन करते हुए हेक्साडेसिमल को 0 और 9 और ए से एफ के बीच परिभाषित किया गया है, जहां एफ उच्चतम मान है। उदाहरण:

00FF00 -> हरा
FF0000 -> लाल
0000FF -> नीला

#hex{
  color: #03BB76;
}

इसका परिणाम कुछ इस प्रकार होगा:

• एचएसएल (रंग, संतृप्ति, हल्कापन): रंग को उसके रंग (0 लाल, 120 हरा, 240 नीला), संतृप्ति (0% ग्रे टोन, 100% पूर्ण रंग), चमक (0% काला) के माध्यम से परिभाषित करना , 100% सफेद) - एचएसएलए भी है, जो पारदर्शिता के स्तर को मापने के लिए अल्फा फैक्टर (0 से 1) पर निर्भर करता है। उदाहरण:

#hsl{
  color: hsla(120, 100%, 50%, 1.0);
}

इस प्रोग्रामिंग का परिणाम पूरी तरह हरा रंग होगा, लेकिन आप एचएसएल कलर व्हील का उपयोग करके अन्य टोन देख सकते हैं।

फंड

• पृष्ठभूमि-रंग: ठोस पृष्ठभूमि रंग
• पृष्ठभूमि-छवि: पृष्ठभूमि में संदर्भ छवि
• रैखिक-ढाल: रैखिक ढाल
• रेडियल-ग्रेडिएंट: गोलाकार ग्रेडिएंट
• दोहराना: प्रभाव दोहराना

background-size: तत्व की पृष्ठभूमि के आकार को परिभाषित करता है, सेटिंग्स के साथ:

• ऑटो: स्वचालित समायोजन
• कवर: तत्व के संपूर्ण स्थान को कवर करें
• शामिल करें: सामग्री का आकार बदलें ताकि पूर्ण/बिना काटी गई छवि दिखाई दे
• मान: तत्व के अंदर छवि का आकार सेट करें

दोहराव पृष्ठभूमि-दोहराना: उस अक्ष को परिभाषित करता है जिस पर छवि दोहराई जाती है:

• दोहराएँ: अधिकतम संभव दोहराव
• रिपीट-एक्स: केवल एक्स अक्ष पर दोहराता है (क्षैतिज)
• रिपीट-वाई: केवल वाई अक्ष पर दोहराता है (ऊर्ध्वाधर)
• अंतरिक्ष: रिक्त स्थान से काटे बिना दोनों अक्षों पर दोहराता है
• गोल: बिना काटे सभी दिशाओं में दोहराता है, बस आकार बदलता है
• कोई दोहराव नहीं: कोई दोहराव नहीं

पृष्ठभूमि-स्थिति: पृष्ठभूमि छवियों की स्थिति निर्धारण
केंद्र, बाएँ, दाएँ, x%,y%

बैकग्राउंड-अटैचमेंट: ब्राउज़र विंडो के अनुसार छवि कैसे व्यवहार करेगी

• स्थिर: हिलता नहीं है
• स्क्रॉल: यह किसी ऑब्जेक्ट के लिए तय है
• स्थानीय: सामग्री के आगे "स्क्रॉल"

पृष्ठभूमि-उत्पत्ति: छवि स्थिति क्षेत्र को परिभाषित करता है

• पैडिंग-बॉक्स: पैडिंग के बगल में मूल कोना
• बॉर्डर-बॉक्स: छवि बॉर्डर के बाहरी क्षेत्र के बगल से शुरू होती है
• सामग्री-बॉक्स: पैडिंग से कम, तत्व सामग्री से संरेखित

background-flip: परिभाषित करता है कि तत्व का रंग किनारों को कवर करता है या नहीं

• पैडिंग-बॉक्स: पैडिंग से संरेखित
• बॉर्डर-बॉक्स: बॉर्डर-संरेखित
• सामग्री-बॉक्स: सामग्री क्षेत्र भरता है
• क्लिप-टेक्स्ट: टेक्स्ट में पृष्ठभूमि (रंग पारदर्शी होना चाहिए)

background-bland-mode: तत्वों की पृष्ठभूमि पर प्रभाव

किनारों

• सीमा-चौड़ाई: वह आकार जो सीमा का होगा
• बॉर्डर-शैली: बॉर्डर प्रकार
• बॉर्डर-रंग: बॉर्डर रंग
• बॉर्डर-त्रिज्या: राउंड बॉर्डर

सीमा-छवि

• स्रोत: छवि पथ सेट करें
• चौड़ाई: सीमा छवि चौड़ाई
• दोहराएँ: नियंत्रित करें कि छवि दोहराई जाती है या नहीं
• आरंभ: तत्व के किनारे से दूरी
• स्लाइस: क्षेत्रों में विभाजित करें

सामग्री (छवि या वीडियो)

ऑब्जेक्ट-फिट: किसी तत्व की सामग्री स्थापित बॉक्स में कैसे व्यवहार करती है

• भरें: संपूर्ण स्थान भरें और विकृत करें
• इसमें शामिल है: यह विकृत नहीं होगा, लेकिन यह स्थापित मापों के भीतर फिट होगा
• कवर: बिना विकृत किए सभी स्थान भरें
• कोई नहीं: मूल वस्तु के माप को अनदेखा करता है और उसके मूल माप का उपयोग करता है
• स्केल-डाउन: विकृत किए बिना सबसे छोटी छवि सेटिंग

वस्तु-स्थिति: केंद्र छवि

• x-अक्ष और y-अक्ष
• बाएँ, दाएँ, मध्य, ऊपर, नीचे