CSS Lists

हर वेबसाइट में lists (सूचियाँ) बहुत काम की होती हैं — जैसे navigation menus, features list, pricing tables, courses, topics आदि। लेकिन plain HTML list बिना CSS के तो बस simple bullets लगती हैं तो आज आप सीखेंगे — कैसे CSS से unordered (ul), ordered (ol) और list items (li) को स्टाइलिश, structured और responsive बनाया जाता है |

CSS Lists Tutorial (लिस्ट को स्टाइल करना)

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

Type	Tag	Description
Unordered List	<ul>	Bullets के साथ list
Ordered List	<ol>	Numbering के साथ list

हर list में <li> टैग होता है जो individual item को represent करता है।

Example: Basic List

<h3>My Favorite Fruits:</h3>
<ul>
  <li>Apple</li>
  <li>Mango</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

Default Output:

Apple
Mango
Banana
Orange

अब देखते हैं CSS से इसे कैसे सुंदर बनाया जाए

Unordered List Styling

Default Style हटाना

ul {
  list-style-type: none; /* bullets हटाना */
  padding: 0;
  margin: 0;
}

अब bullets गायब हो जाएँगे और आप अपनी custom design लगा सकते हैं।

Custom Bullets बनाना

ul.custom-list {
  list-style-type: square; /* bullet shape बदलना */
}

Options:

disc (default)
circle
square
none

Example – Stylish List

<style>
.styled-list {
  list-style-type: none;
  padding: 0;
}

.styled-list li {
  background: #f0f8ff;
  margin: 8px 0;
  padding: 10px 15px;
  border-left: 5px solid #0077cc;
  border-radius: 6px;
  font-size: 16px;
  color: #333;
}
</style>

<ul class="styled-list">
  <li>Fast Loading</li>
  <li>Responsive Design</li>
  <li>SEO Friendly</li>
  <li>Modern UI</li>
</ul>

यह design professional websites में features list के लिए perfect है।

Ordered List (Numbered List)

<ol>
  <li>HTML Basics</li>
  <li>CSS Fundamentals</li>
  <li>JavaScript Intro</li>
</ol>

CSS से Numbering Type बदलना

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

Available options:

decimal → 1, 2, 3
upper-roman → I, II, III
lower-roman → i, ii, iii
upper-alpha → A, B, C
lower-alpha → a, b, c

Example – Custom Ordered List

<style>
.course-list {
  list-style-type: decimal-leading-zero;
  padding: 10px 25px;
  font-family: "Poppins", sans-serif;
  color: #333;
}

.course-list li {
  margin: 8px 0;
  padding: 8px 10px;
  border-bottom: 1px dashed #ccc;
}
</style>

<ol class="course-list">
  <li>HTML Introduction</li>
  <li>CSS Styling</li>
  <li>JavaScript Basics</li>
  <li>React JS Overview</li>
</ol>

यह numbering 01, 02, 03 के साथ modern look देगा।

Custom Icons के साथ List

आप bullets की जगह Font Awesome icons भी लगा सकते हैं

<style>
.icon-list {
  list-style-type: none;
  padding: 0;
}
.icon-list li {
  margin: 8px 0;
  font-size: 16px;
}
.icon-list i {
  color: #28a745;
  margin-right: 8px;
}
</style>

<ul class="icon-list">
  <li><i class="fa-solid fa-check-circle"></i> Responsive Layout</li>
  <li><i class="fa-solid fa-check-circle"></i> Clean Code</li>
  <li><i class="fa-solid fa-check-circle"></i> Easy Customization</li>
</ul>

अब हर list item के साथ एक green check icon दिखेगा

List Inside Navigation Bar


<style>
.nav {
  list-style: none;
  display: flex;
  background: #0077cc;
  padding: 10px;
  margin: 0;
}

.nav li a {
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  transition: 0.3s;
}

.nav li a:hover {
  background: #005fa3;
  border-radius: 5px;
}
</style>
<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

यह एक perfect horizontal navigation bar बना देगा।

List Marker Position

List bullets कहाँ दिखें — text के अंदर या बाहर, यह तय करने के लिए list-style-position property होती है

ul {
  list-style-position: inside;
}

Options:

inside → bullets text के साथ अंदर
outside → bullets text के बाहर (default)

Shorthand Property

CSS में list-style shorthand से एक साथ तीनों properties दी जा सकती हैं:

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

इसमें:

square → type
inside → position
url() → custom image

Custom Bullet Image

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

अब bullets की जगह आपकी custom image (जैसे ✅ या ⭐) दिखाई देगी।

Common Mistakes

❌ list-style-type गलत जगह लिखना
✅ हमेशा <ul> या <ol> selector में लगाएँ
❌ बहुत ज़्यादा padding देना
✅ हर browser में balance spacing रखें
❌ bullet हटाकर align करना भूल जाना
✅ padding-left adjust करें ताकि text properly align रहे

Quick Recap

Property (प्रॉपर्टी)	Description (काम)	Example (उदाहरण)
`list-style-type`	bullet/number style (बुलेट/नंबर स्टाइल)	`circle`,`square`,`decimal`
`list-style-position`	bullet position (बुलेट पोजीशन)	`inside`,`outside`
`list-style-image`	custom bullet image (कस्टम बुलेट इमेज)	`url('icon.png')`
`list-style`	shorthand (शॉर्टहैंड)	`list-style: square inside url('icon.png');`

Practice Task

एक “Features List” बनाइए जिसमें:
कोई default bullets न हों
हर item के साथ green check icon हो
hover करने पर text blue हो जाए
हर list item के बीच spacing हो

CSS Lists आपकी वेबसाइट में readability और structure लाते हैं। सही color, spacing और icons के साथ लिस्ट्स professional दिखती हैं। Navigation bars, menus और feature sections में ये बहुत काम की होती हैं