anyone here good with basic CSS and HTML?

[mellowtigger]

When I use lists, I like having extra vertical space between each listed item. I have done it for years here by deliberately adding two line breaks at the end of each line as:

<br/><br/>

I'd prefer something easier, so I can do it once and not have to repeat it for every item in the list. I tried the following code, and it works great in a test editor, but it fails in an actual Dreamwidth page.

<p>
<style type="text/css">
  li { margin-bottom: 1em; }
</style>
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
</p>

I'd rather have an inline code that I put into the OL element, but I couldn't even get that much to display properly in the test editor. I thought I knew my basics, but this simple problem has me stumped. (Please don't make me learn Dreamwidth Journal Themes. I'm going to have to learn Dreamwidth Journal Themes, aren't I?) Any suggestions?