Submit Tutorial

spacer
Newsletter

spacer
RSS
spacer
Submit Tutorial

spacer
website promotion banner
eturnkeys
Your Ad Here
Navigation With Lists (Vertical)
by Joseph Skidmore
Massive Custom Forms - User Registration and Fields Validation
by TutorialStream.com
Tricks Using Lists
by Jeff Singer
Datasheet control
by Ben Hunt
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
HTML and CSS tutorials
A collection of free web templates. Premium quality web designs, easy to browse.
Html lessons and tutorials in web page design.
You, too, can design your own website with over 45 interactive HTML tutorials. Also try your hand at JavaScript or check out a search engine submission service.
2 Create a Website
Offers free tutorials on website creation, generating traffic and making money online.
UK Hosting Services
Provider of low cost affordable UK web hosting services.
HTML and CSS  Home HTML and CSS Tutorials How to Assign Custom List Bullets with CSS
rss

How to Assign Custom List Bullets with CSS

Author: DesignSpice More by this author

Added: Sept 14, 2007 Rating:  Average Rating: 2.7 Votes: 37 Position: 10967 of 13476Average Rating: 2.7 Votes: 37 Position: 10967 of 13476Average Rating: 2.7 Votes: 37 Position: 10967 of 13476Average Rating: 2.7 Votes: 37 Position: 10967 of 13476Average Rating: 2.7 Votes: 37 Position: 10967 of 13476 Level: Experienced Software:  Photoshop

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;
}

How to Assign Custom List Bullets with CSS tutorial: Final Result



Author's URL: www.designspice.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

HTML and CSS  More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com
Add comments to "How to Assign Custom List Bullets with CSS"