Make HTML Lists Stand Out with Bulleted List HTML Styles 2


HTML Bullets for ListsThe default bullets used for HTML lists, whether ordered or unordered, are very ordinary to say the least.

And with some themes, you will find that they seem to have a mind of their own, lining up too close to the edge or tabbing in too far.

This post shows you how to get a little control over how you want your HTML lists to appear. It will also show you how to add a little polish to your blog pages so that they look more professional or at least catch the attention of your readers.

Default HTML Lists

Default HTML Bullets for Unordered Lists

By default,unless specified otherwise, your lists will have a disc like so:

  • List item 1
  • List item 2
  • List item 3

Not much excitement there!

If you are using WordPress (or any other Content Management System or a WYSIWYG editor) then you can simply click on the list icons in your particular editor to format your list.

But for those interested in the code, it looks like this:

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

 

Many themes will use the disc bullets for first level lists and the circle bullets for nested lists.

If not, you can edit your code and specify 1 of 3 different types of symbol to be used. However, you are again restricted to 3 default symbols for your unordered lists:

Bulleted HTML ListsTo use these bullet styles, then the result and the code in each case would look like this:

HTML for a list with the circle bullet:

  • List item 1
  • List item 2
  • List item 3
<ul type=”circle”>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

 

HTML for a list with the disc bullet:

  • List item 1
  • List item 2
  • List item 3
<ul type=”disc”>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul> 

 

HTML for a list with the square bullet:

  • List item 1
  • List item 2
  • List item 3
<ul type=”square”>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul> 

 

Default HTML Bullets for Ordered Lists

HTML Course

Your default ordered list will look like this:

  1. List item 1
  2. List item 2
  3. List item 3

You can then style how you would like the numbers to look. You might prefer a bigger font or a bold text etc. and you can do this by editing your style sheet and adding an attribute for the ol tag.

Here is an excellent example of what you can do to give your ordered lists a little extra style.  The code has been provided by Roger Johansson on his site, 456bereastreet.com.

And here is another example that makes use of Roger’s code with some modifications:

Styling Html Ordered Lists

Fancy HTML Lists

Now if you would like to be a little more creative, then you can use tiny graphics to style your lists.

You can find a wide range here but you do need to check the terms of use in each case. In addition, you need to make sure that the selected icon is very, very tiny.

Example

As an example, you could create your own version of a bullet, using Photoshop, or a similar image editor.

My recommendation is to make the image no bigger than 10px by 10px but 9 x 9 would be better.

  • List item 1
  • List item 2
  • List item 3

In the example above I have decided to apply the square bullet to just one particular list.

Therefore this code uses a class like so:

bullet-image

 

Indented HTML Lists

You might decide to keep fancy, image based lists for particular emphasis applied to select purposes only.  The class example above allows you to do that.

However, you might decide that you do want your regular bullets and lists to look a little more polished.

For example, I have a preference for numbered lists to be ‘tabbed in’. To get his effect, you can add a margin-left rule to the ordered list style.

margin-left: 35px;

 

Applying Your HTML Style to All or Selected Lists

Generic HTML List Styles

Once you find the style of bullets that you prefer for your entire blog or site, then it is best to enter your code in your style sheet so that it applies to all of your pages.

If you are using WordPress, then just click on Appearance-Editor and then choose your style sheet from the right hand menu. Some themes will provide you with a dedicated file for your own styles.

If your theme doesn’t, then I recommend entering your styles at the end of the file and notate that section with your initials like so:

/* Styles by GG */

 

Specific HTML List Styles

For one-off styles, such as the red squares that I have used above, I recommend adding a class style to your style sheet and then applying that class to the list code where required.

For example:

  1. Add a class style to your style sheet:
    ul.sqrbullets {
        list-style-image:url(‘imgName.gif’);
    }
  2. In your post HTML, apply the class style to the <ul> tag:
    <ul class=”squrbullets”>
       <li> List 1</li>
       <li> List 2</li>
    </ul>

 

Missing HTML List Bullets

If you have just installed a new theme and find that, by default, bullets are not being displayed for your lists then this blog post can help you fix the problem. Alternatively, if you are wishing to remove bullets from one particular list then this same post will show you how.

Have fun styling your HTML lists.

Teaser image courtesy of  Stuart Miles/ FreeDigitalPhotos.net


Leave a comment

Your email address will not be published. Required fields are marked *

CommentLuv badge

2 thoughts on “Make HTML Lists Stand Out with Bulleted List HTML Styles