override jquery theme with custom css

Question

I am not a web designer. I'm trying to help out a friend.

In building this site, I've decided to implement some jquery to facilitate some smooth transitions between page elements. The problem I run into is that in order for the jquery to function, I must include http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css in my code, which overrides my custom css. The specific problem is that it reformats the text in my hyperlinks and it looks awful.

What is the easiest way to prevent the jquery css from overriding my custom css? I've been reading about themeroller, but after all the work I've already done, even that is looking too complicated.

Answer 1

As other answers state, you can simply add !important to any css style you definitely want to use (like yours vs. jquery's). That should do the trick. But this is quite tedious when done for your whole css document.

First thing you can do

is to make sure your css is included after jquery's. This will force your css stylings over jquery's as they are included last. And hope it works. (see Two css files defining same class)

Next thing you can do

is to play around with jquery's css sheet. What happens if you include a file jquery.mobile-1.2.0.min.css that is actually empty? Will jquery work? What if you just delete all css code that touches your stuff? What exceptions are logged in the developer tools?

Finally you can

go the hard (but recommended) way of putting all the css stuff (yours and jquery's) together in a custom jquery theme. This can mean a lot of reordering and replanning, but once you've done it, jquery should be no problem any more.