Special Considerations for CSS
Gadgets use pretty standard stylesheets, with one caveat. You absolutely must define height and width of the gadget body, either in the CSS or your gadget HTML (or in the JavaScript code). Gadgets don't come with default dimensions, so you may end up with something tiny and unusable in your sidebar if you don't define them.

For this gadget I used <div> and <span> elements with both absolute and relative positions, rather than tables. I defined dimensions, as well as placement, for most of the elements, and used the "background" property to set images. (So if you're trying to figure out where those graphics come into play, check main.css.)

As an example, here is the portion of main.css pertaining to main.html elements:

 #gadgetbody {
	position:absolute;
	top:0px;
	left:0px;
	height:200px;
	width:130px;
	background: url(../images/gadgetbackground.jpg) no-repeat;
}

#dnetlogo {
	position:relative;
	height:25px;
	width:130px;
	cursor:hand;	
}

#headline {
	position:relative;
	top:25px;
	left:10px;
	height:85px;
	width:110px;
	margin:0px 0px 0px;
	font-size:10px;
	font-family:Calibri;
	border: none;
	cursor:hand;
	overflow:ellipsis;
}

#headlinenav {
	position:relative;
	left:10px;
	top:5px;
	width:110px;
	height:50px;
	font-size:12px;
	font-family:Calibri;
}

Another side note: the settings page is a strange little beast. The Sidebar API provides a standard panel with an Ok and Cancel button. Any settings page you specify sits within this panel. Take a look at Microsoft's pre-built Gadgets and you'll see that they took great pains to position assets in the center of the Settings panel using good ol' tables and spacer GIFs. If you want a cleanly branded Settings panel that looks like it belongs to the Gadget, this seems to be your only option since your stylesheets will only apply to the settings HTML page, not the panel itself.