Be able to apply bullets including shape, alignment, line spacing and indent

Topic 14 – Styles: Bullets, Alignment, Line Spacing & Indent

1. Bullet Shapes

Bullets are the little symbols that appear before each list item. They can be:

• • Disc (default)
• ◦ Circle
• ▪ Square
• ✓ Check‑mark (custom image)

Change the shape with CSS:

<ul style="list-style-type:circle;">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

🔍 Tip: Use list-style-image to insert a custom icon, like a check‑mark, for a polished look.

2. Alignment

Alignment controls where the bullet and text sit relative to the page.

• Left‑aligned (default)
• Center‑aligned
• Right‑aligned

Example:

<ul style="text-align:center;">
  <li>Center item</li>
</ul>

📝 Exam Tip: If the question asks for a “centered bullet list,” set text-align:center on the <ul> element.

3. Line Spacing (Line Height)

Line spacing determines how much vertical space is between lines of text. A common setting is 1.5× the font size.

🛠️ Practice: In your word processor, set line-height:1.5 for a clean, readable list.

4. Indent

Indent moves the entire list (or a specific item) away from the left margin.

• No indent (default)
• Indented 20 px
• Indented 40 px

Example CSS:

<ul style="margin-left:30px;">
  <li>Indented item</li>
</ul>

📚 Analogy: Think of indent as stepping stones – each step (indent) takes you deeper into the list.