Is the CSS file for JQuery Mobile necessary for styling a Mobile Navbar?

Question

So I have the following snippet of code, which I copied from one of the demos of JQuery Mobile Navbars:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div data-role="footer">
        <div data-role="navbar">
            <ul>
                <li><a href="#" data-icon="grid">Summary</a></li>
                <li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
                <li><a href="#" data-icon="gear">Setup</a></li>
            </ul>
        </div><!-- /navbar -->
</div><!-- /footer -->

Which does work as expected. However, my issue is the css file I have to link into my code, which overwrites a lot of my style.css file (such as background-color). My question is, is the .min.css file really necessary for the mobile navbars to work correctly, or is there some alternative way of styling them? Maybe it is possible to declare this Navbar in a different HTML page and call it in the page I want to use it?

Any help goes. Thanks.

Answer 1

You can make your style.css selectors more specific or you can use !important.

You can use iframes to put your navbar in another HTML.

If your style.css link tag is after the jquery.mobile css and they have the same selector, the later one will override the previous.

Read more about CSS Specificity