SEARCH
  Tutorials HTML and CSS Tutorials How to Assign Custom List Bullets with CSS

How to Assign Custom List Bullets with CSS

DesignSpice Tutorials Sep 14, 2007

1. In your html page embed link to your css file:

<html>
<head>
<title>Test Document</title>
<link href="/img_articles/12817/styles.css" rel="stylesheet" type="text/css">
</head>

<body>

</body>
</html>

2. Create your bulleted list. Here is ours:

<p>Most popular apple varieties in New England today:</p>
<ul>
<li>McIntosh</li>
<li>Cortland</li>
<li>Red Delicious</li>
<li>Empire</li>
<li>Rome</li>
</ul>

image 1

3. In css file we will redefine <li> tag. Let’s change these default bullets to our custom bullets.

li {
list-style-position: outside;
list-style-image: url(your_bullet.gif);
}

image 2

4. Format text:

li {
list-style-position: outside;
list-style-image: url(your_bullet.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;

}

image 3

5. We can further format list: add more space between bullets and text. Add more space between lines.

li {
list-style-position: outside;
list-style-image: url(your_bullet_address.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
padding-left: 10px;
line-height: 18px;
}

How to Assign Custom List Bullets with CSS

subscribe to newsletter