I would not use the increase/decrease indent buttons - they simply add/remove a <blockquote> around the text you have highlighted...the blockquote artificially increases the indent at the cost of being really ugly code, and being semantically incorrect.
Instead, you can use the padding and margin elements in your attached css style sheet.
margin-left is the amount of space between the left edge of the <ul> container and the list symbol. padding-left is the distance between the symbol and the text. You can also define margins around the <ul> independently of the list items.
Here is an example of some styling you could use...adapt as you desire.
Code:
CSS:
ul {margin:.5em; list-style-type:disc}
li {margin-left:.5em; padding-left:1em}
HTML:
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
The above example does not include classes - they are unnecessary if you want all your lists to be styled the same. If you want them to look differently then all you need to do is have a class in the <ul> with the styling like this:
Code:
CSS:
ul {margin:.5em; list-style-type:disc}
li {margin-left:.5em; padding-left:1em}
ul.someclass li {color:green; font-style:italic}
HTML:
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<ul class="someclass">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>