I've just started using Jquery Mobile.  I need to build a responsive web site that is basically a mobile-ready HTML site that can be easily converted to a phone app later with PhoneGap and a single code base that runs on a website and most of the mobile devices with minimal effort to bridge compatibility.

My first problem which sort of goes at the heart of whatever jQuery mobile is suppose to be exactly:  How do I change the width of the header.

`  <div data-role="header" data-theme="c">
    <h1>dumdum</h1>
  </div>
`

Should I be using a height in the style, should I be setting up a separate CSS file, give this div an ID and then supplement the height in that CSS?  Themeroller creates its own CSS so I don't think making direct changes there would be a good thing because then I can't make small changes to the theme.

I'm just trying to understand how to use Jquery Mobile I guess which this very basic first step problem and even if its the right thing.  I like the themeroller concept.

Also, if jquery mobile is not the right thing, please suggest otherwise.