📝 CSS List Properties

CSS List Properties का उपयोग webpage पर मौजूद lists की appearance और styling को control करने के लिए किया जाता है।

CSS में mainly दो प्रकार की HTML lists होती हैं:

• <ul> → Unordered List — इसमें सामान्यतः bullets होते हैं।
• <ol> → Ordered List — इसमें सामान्यतः numbers या letters होते हैं।

CSS List Properties की मदद से हम list के bullets/numbers का type, position और appearance बदल सकते हैं।

---

🔹 Types of CSS List Properties

CSS में मुख्य List Properties हैं:

Property	काम
list-style-type	Bullet या number का type/shape define करता है
list-style-position	Marker की position define करता है
list-style-image	Bullet की जगह custom image लगाता है
list-style	ऊपर की तीनों properties को एक साथ set करता है

---

1. list-style-type Property

list-style-type property यह define करती है कि list item के सामने bullet या number किस type/shape में दिखाई देगा।

यह property दोनों types की lists — <ul> और <ol> — के साथ काम करती है।

---

🔸 Unordered List <ul>

Unordered List में commonly ये values use की जाती हैं:

Value	Meaning	Appearance
disc	Filled circle	● Item
circle	Hollow circle	○ Item
square	Solid square	■ Item
none	Bullet remove करता है	Item

disc

यह <ul> का सामान्य default marker होता है।

ul {
  list-style-type: disc;
}

Output:

● Item 1
● Item 2
● Item 3

circle

इससे hollow circle दिखाई देता है।

ul {
  list-style-type: circle;
}

Output:

○ Item 1
○ Item 2
○ Item 3

square

इससे solid square bullet दिखाई देता है।

ul {
  list-style-type: square;
}

Output:

■ Item 1
■ Item 2
■ Item 3

none

इससे list के bullets पूरी तरह remove हो जाते हैं।

ul {
  list-style-type: none;
}

Output:

Item 1
Item 2
Item 3

यह property अक्सर navigation menus और custom list designs में useful होती है।

---

🔸 Ordered List <ol>

Ordered List में numbers के अलावा letters और Roman numerals भी use किए जा सकते हैं।

Value	Description	Example
decimal	Normal numbers	1, 2, 3...
lower-alpha	Small letters	a, b, c...
upper-alpha	Capital letters	A, B, C...
lower-roman	Small Roman numerals	i, ii, iii...
upper-roman	Capital Roman numerals	I, II, III...

Example:

ol {
  list-style-type: upper-roman;
}

Output:

I. Item 1
II. Item 2
III. Item 3

Complete Example:

ul {
  list-style-type: square;
}

ol {
  list-style-type: upper-roman;
}

यहाँ <ul> में square bullets और <ol> में uppercase Roman numerals दिखाई देंगे।

---

2. list-style-position Property

list-style-position property यह control करती है कि list marker (bullet/number) list के content के relation में कहाँ दिखाई देगा।

इसके दो main values हैं:

• outside
• inside

---

🔸 outside

यह default value है।

इसमें marker content area के बाहर रहता है और text marker के बाद शुरू होता है।

ul {
  list-style-position: outside;
}

Simple structure:

●  This is a list item
   and the text continues here.

---

🔸 inside

इसमें marker content area के अंदर आ जाता है।

अगर text multiple lines में wrap होता है, तो अगली line marker के alignment के अंदर आ सकती है।

ul {
  list-style-position: inside;
}

इसका use तब किया जा सकता है जब हमें marker को list के content area के अंदर रखना हो।

याद रखने की Trick:

outside → Marker बाहर

inside → Marker अंदर

---

3. list-style-image Property

list-style-image property का उपयोग normal bullet की जगह custom image लगाने के लिए किया जाता है।

इससे हम अपनी पसंद की छोटी image को list marker की तरह use कर सकते हैं।

Example:

ul {
  list-style-image: url('bullet.png');
}

यहाँ bullet.png list के normal bullet की जगह marker के रूप में use होगी।

उदाहरण के लिए हम star जैसी image use कर सकते हैं:

⭐ Item 1
⭐ Item 2
⭐ Item 3

Important:

url() के अंदर image का path दिया जाता है।

url('bullet.png')

अगर image उसी folder में है, तो केवल उसका filename दिया जा सकता है। दूसरे folder में होने पर उसका relative path देना पड़ सकता है।

---

4. list-style — Shorthand Property

list-style एक shorthand property है।

इसकी मदद से हम एक ही line में इन तीन properties को set कर सकते हैं:

1. list-style-type
2. list-style-position
3. list-style-image

Syntax:

list-style: <type> <position> <image>;

Example:

ul {
  list-style: square inside url('bullet.png');
}

यहाँ:

• square → list-style-type
• inside → list-style-position
• url('bullet.png') → list-style-image

इस तरह एक ही declaration में तीनों properties की values set की जा सकती हैं।

---

🔑 Quick Revision

list-style-type

→ Bullet/Number कैसा होगा?

list-style-position

→ Bullet/Number कहाँ होगा?

list-style-image

→ Bullet की जगह कौन-सी image होगी?

list-style

→ तीनों properties को एक साथ set करता है।

---

🧠 Easy Trick

TYPE → क्या दिखेगा?

POSITION → कहाँ दिखेगा?

IMAGE → कौन-सी image दिखेगी?

STYLE → सबको एक साथ set करो।

सबसे important syntax:

ul {
  list-style-type: square;
  list-style-position: inside;
  list-style-image: url('bullet.png');
}

या shorthand में:

ul {
  list-style: square inside url('bullet.png');
}