html lists: indent spacing and change bullet styles

Working on my website recently and created a multi-level unordered list. The spacing of the second level indent was much more than I needed and I wasn’t loving the fact that the bullets were the same for both levels.

I found code to solve both those problems, so as usual, I’m posting it here for my future reference and, hopefully, to help someone else looking to solve the same problems.

I changed the second level bullet style to square and reduced the second level indent to 15px. Here’s a screen shot of my final list, followed by the code snippets I used:

Ordered List – To adjust the margin of all list items in a numbered list:

Unordered List – To adjust the margin of all list items in a bulleted list.

List Item – To adjust the margin for a specific list item:

Bullets – To adjust the bullet style:

<ul style="list-style-type:none"

So, to wrap up, here’s what my actual code looks like:

Some might say, “You should have done that with css.” I could have. But I will want to use this on some blogs where I don’t have the ability to edit the css without paying the fee to customize it.