How to Assign Custom List Bullets with CSS

4 Oct

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

<html>
<head>
<title>Test Document</title>
<link href=”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;
}

Final Result

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: