I am looking to remove system generated css from my nodes in drupal.
Here is the code from my template:
<?php if (isset($content['field_portrait_image'])) { echo '<div class="portrait-image">'; print render($content['field_portrait_image']); echo '</div>';} ?>
and here is what is being generated:
<div class="landscape-image"><div class="field field-name-field-landscape-image field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://logan-net.com/sites/default/files/ktgigpic-mini.png" width="300" height="225" alt="" /></div></div></div></div>
as you can see, there are 3 extra divs in there with a whole plethora of extra classes. How can I just get it to output what is in my template?
I would recommend couple approaches.
Look for Drupal framework themes that override default Drupal templates, and make for good starter barebone themes. Zen was good for me, but I have read of others, even more bare ones, some allowing to start virtually from scratch. If you look for Drupal 7 + HTML5 specifically, check this overview.
Learn basics of Drupal theming to understand exactly how these things work and interact with each other, there are plenty tutorials on official site. Meanwhile, there is good article by Nathan Smith (author of 960 grid system): HTML5 in Drupal 7. It explains how templates override each other and what to do to remove bloat.
Check Theme Developer module. Here is the screencast of how it works. (Thanks Terry in comments.)
Lastly, this question really belongs to drupal.stackexchange.com. Learn your network. Actually, it even says so on drupal tag description.