Here is some plain HTML.

<h1>My Todo List</h1>
<p>Things I have to do before I launch my website.</p>
<ul>
	<li>Write my content</li>
	<li>Design my web page</li>
	<li>Code my web page</li>
</ul>

This is how it renders without any CSS.

This is how it renders with some simple CSS.

div.simple { background: #fff; width: 200px; padding: 10px 10px 15px 15px; font: 12px/17px Helvetica, sans-serif; color: #444; }
div.simple h1 { margin: 0 0 5px 0; font: bold 16px/22px Helvetica, sans-serif; color: #7ca81e; }
div.simple p { margin: 0 0 5px 0; font-weight: bold;}
div.simple ul { padding: 0 0 0 20px; margin: 0;}
div.simple li { list-style-image: url(images/arrow.gif); }

This is how it renders with more complex CSS.

div.complex { background: #ba9062 url(images/pad.png) no-repeat; width: 215px; height: 340px; padding: 60px; font: 18px/24px "Marker Felt", sans-serif; color: #444; }
div.complex h1 { height: 0; background: url(images/ttl_my_todo_list.png) no-repeat; overflow: hidden; padding: 53px 0 0 0; margin: 10px 0 10px 0; line-height: 120px;}
div.complex p { margin: 0; font-size: 20px;}
div.complex ul { padding: 0; margin: 10px 0;}
div.complex li { list-style: none; background: url(images/check.png) no-repeat; padding: 0 0 0 25px;}