header for accordions

header for accordions


Here is my HTML markup:
<div id="accordion">
    <h2><a href="#">Buyer Resources</a></h2>
<div>
    

Cras dictum. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Aenean lacinia mauris vel est.



</div>
    <h2><a href="#">Seller Resources</a></h2>
<div>
    

Cras dictum. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Aenean lacinia mauris vel est.



</div>
    <h2><a href="#">Community Resources</a></h2>
<div>
    

Cras dictum. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Aenean lacinia mauris vel est.



</div>
</div>
My jQuery UI markup is:
<script type="text/javascript">
    $(function() {
        $("#accordion").accordion({
            header: 'h2',
            event: 'mouseover',
            autoHeight: false,
            active: 0,
            clearStyle: true
        });
    });
</script>
As you can see, I am using the header option to set them as h2. The
problem is that it's not properly styling them. How can I style my
heading tags!?!!!!