Question

I am using a jquery accordion as following:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () { 
     $("#accordion").accordion();
    }
</script>

<style>
.ui-accordion-content{
        margin:0;
        padding:0;
}
</style>

JQuery creates a div.ui-accordion-content and applies the styles from jquery-ui.css to it.
Unfortunately my own css from the style tags is not applied.

Why?

Answer 1

The correct approach

You need to understand CSS precendence, read up on it http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/.

Using this your code would be updated to the following:

.ui-accordion .ui-accordion-content{
    margin: 0;
    padding: 0;
}

Since it is defined exactly the same as in the linked jquery ui css and after it in the DOM it will therefor have precedence.

The quick and dirty fix

Fix by adding !important to your own style like this:

.ui-accordion-content{
    margin:0 !important;
    padding:0 !important;
}