• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Lists

← Previous Next →

🔹 What Are CSS Lists?

HTML lists like <ul>, <ol>, and <li> can be styled using CSS to change:

  • Bullet styles

  • List spacing

  • Positioning

  • Custom icons

  • List layout (horizontal/vertical)

🔸 1. Types of HTML Lists

  • Unordered List (<ul>) – Bulleted list

  • Ordered List (<ol>) – Numbered list

  • List Item (<li>) – List item inside ul/ol

🔸 2. Styling List Type

Use list-style-type to change bullets or numbering.

ul {
  list-style-type: square;
}

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

🔹 Common Values:

  • disc, circle, square, none (for <ul>)

  • decimal, lower-alpha, upper-roman, lower-greek (for <ol>)

🔸 3. Removing List Markers

ul {
  list-style-type: none;
}

This is often used in nav menus.

🔸 4. Changing List Position

ul {
  list-style-position: inside;
}

Values:

  • outside (default)

  • inside (bullets/number appear inside content box)

🔸 5. Custom List Icons with Images

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

🔸 6. Horizontal Lists (Inline Navigation)

ul li {
  display: inline;
  margin-right: 20px;
}

Great for nav menus or toolbars.

🔸 7. Shorthand Property: list-style

ul {
  list-style: square inside;
}

Same as:

list-style-type: square;
list-style-position: inside;

Practice Questions

Q1. Change bullet style of a <ul> to circle.

Q2. Change number style of an <ol> to uppercase Roman.

Q3. Remove bullets from a list.

Q4. Set list markers inside the list content.

Q5. Apply a custom image as bullet.

Q6. Style list items to appear inline with spacing.

Q7. Combine list-style-type and list-style-position using shorthand.

Q8. Set a different bullet style for two <ul> lists.

Q9. Use lower-alpha for an ordered list.

Q10. Make a vertical navigation menu without bullets.

CSS Lists Quiz

Q1: Which property sets the type of list marker?

A. list-style-type
B. list-type
C. marker-style
D. bullet-type

Q2: How do you remove bullets from a list?

A. list-style-type: none;
B. display: none;
C. remove: bullet;
D. list-style: null;

Q3: What does list-style-position: inside; do?

A. Places the bullet inside the content box
B. Removes bullet
C. Centers the list
D. Moves list to the right

Q4: Which value displays numbers as uppercase Roman numerals?

A. decimal
B. upper-roman
C. upper-alpha
D. roman-uppercase

Q5: How to use an image as a list marker?

A. list-style-image: url('icon.png');
B. background-image: list('icon.png');
C. list-icon: 'icon.png';
D. marker-image: 'icon.png';

Q6: What does list-style: square inside; mean?

A. Square bullet inside content
B. Square border
C. Inside square border
D. Indented square shape

Q7: Which display makes list items appear in one line?

A. block
B. inline
C. flex
D. absolute

Q8: Which list style type is default for <ul>?

A. disc
B. circle
C. square
D. none

Q9: What is the correct shorthand for all list styles?

A. list: all
B. list-style
C. list-property
D. marker-style

Q10: Can list-style-image be used with ordered lists?

A. Yes
B. No (only works with <ul>)
C. Only in flexbox
D. Only with CSS Grid
← Previous Next →
Login
Go Back Top