How to Insert a Bullet Point List into Your Website with Expression Web

Adding an Unordered List and Creating Your Own Customized Bullet Points

How to Insert a Bullet Point (Unordered) List into Your Website with Expression Web

by Christopher Heng,

There are occasions when you want to add a list of items to your web page with dots or "bullets" appearing before each point. This tutorial shows you how you can do this using the free Microsoft Expression Web editor. I will also discuss how to use your own customized bullets in place of the default bullet points provided by HTML and CSS.

Note: if you are not sure what a bullet point list (technically, an unordered list) is, see the "Prerequisites" section below, where it is used.


As implied by the subject matter, this article assumes the following.

How to Insert an Unordered (ie Bullet Point) List

  1. Open your web page in Expression Web and put your text cursor at the spot where the list is to begin. You can do this by moving your mouse pointer to the location and clicking it.

  2. Click "Format | Bullets and Numbering" from the menu. That is, click "Format" from the menu bar, followed by the "Bullets and Numbering" line in the submenu that drops down.

  3. A dialog box with the title "Bullets and Numbering" will appear.

  4. Click the "Plain Bullets" tab near the top of the dialog box. (Don't worry, I'll discuss the "Picture Bullets" tab in the section below.)

    You are given a few built-in choices for the bullets, namely the solid-colour ("solid-color" in US English) round bullet points, the outline-only circle bullet points, and the solid-colour square bullet points. Click the one that suits your fancy, followed by the "OK" button.

  5. A bullet point of the type you selected earlier will appear in your document. Type your content for that point, and when you are done, hit the ENTER key. You will notice that Expression Web automatically creates a new bullet point for you when you do this. If this is the last item on your list, just hit the ENTER key again and the editor will remove the final blank item on the list and put you in a normal paragraph.

How to Use Picture Bullets for Your Unordered List

You can also use your own pictures instead of the round, hollow circle or square built-in bullets. For example, you may want to use ticks before each point, like those you find in a checklist, or perhaps even change the points to arrows.

  1. Copy the image file containing your bullet to your website's images folder. For those who have followed my main Expression Web tutorial (specifically chapter 2), this is the subfolder named images located in the directory on your computer containing your website files. It will be listed in the "Site View" tab in Expression Web.

    If you are wondering, "What's this image file? Where do I get it?", it's just a picture that you draw yourself with an image editor. If you can't figure out how to create one, just use the built-in bullets (see above section). There's no point getting stressed over something that is actually just a minor cosmetic change.

  2. Click "Format | Bullets and Numbering" from the menu.

  3. Click the "Picture Bullets" tab, if it is not already activated. (If you're not sure, just click it anyway. It'll do no harm.)

  4. Click the "Specify picture" radio button, followed by the "Browse" button.

  5. In the "Select Picture" dialog box that appears, go to your "images" folder and select the picture you want to use as your bullet point. Click the "Open" button when done.

  6. Click the "OK" button to dismiss the "Bullets and Numbering" dialog box.

  7. Your picture should appear instead of the usual bullet point. If you have made one that is too big, it will not be resized, but will appear as-is. In such a case, simply hit your backspace key to delete the list, redo your picture and try again.

    Otherwise, type your content for the list. The list behaves exactly the same way as the built-in ones mentioned earlier, with new bullet points automatically appearing when you hit the ENTER key, and the final empty bullet point removed by Expression web when you hit ENTER a second time.

Alternative Method for the Default Solid Round Bullet Point

If you only want to use the solid round bullet for your unordered list, you can also click the "Bullets" button on the toolbar at the top of the Expression Web window (see picture below).

Toolbar with Bullets icon circled

For the other options (circle, square and customized bullets), you will need to invoke the Bullets and Numbering dialog box by using the menu.

Copyright © 2017-2019 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Insert a Bullet Point (Unordered) List into Your Website with Expression Web

Link to Us
No Spam Policy
Privacy Policy
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Web Hosting
Perl / CGI
.htaccess / Apache


Free webmasters and programmers resources, scripts and tutorials Free How-To Guides
Site Design Tips at
Find this site useful?
Please link to us.