Stylesheet conflicting with jquery ui style

I have the following style which works as I want it to work:

.container { font-family:arial; text-decoration:none; font-size:12px; }

.title {color:#707070; text-decoration:none; }
.username {color:#8DAAB8;}
.dateandtime {color:#A5A7AC;}

.container:hover .title { color: #000000; }
.container:hover .username { color: #DF821B; }
.container:hover .dateandtime { color: #3185B6; }

But for some reason, when I add the following style to my page (which I need):

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" />

The .title class in the original style above stops working, and it remains #000000 for some reason. It should be #707070 in normal state, and #000000 when hovered over.

Why is this happening when I add the external style sheet and how do I stop this from happening without removing the external style sheet开发者_高级运维?

As soon as I remove the external stylesheet, the .title class starts working perfectly again, but the rest of the page, jquery-ui-tabs, jquery-ui-sortables stop working properly.

Ok i see. Well your external stylesheet has no style rule for .title, so some combination overwrites your style. To make sure that your style takes predence, try to make your rule more specific. If you have other elements that always wrap your .title elements, add them to the rule like this: #container .something .title to get a more specific rule.