I have this situation. I'm using bootstrap and jquery-ui in my application, included in this way:

```
<link href="bootstrap.min.css" rel="stylesheet" media="screen"/>
<link href="jquery-ui.css" rel="stylesheet" media="screen"/>
<!-- My custom stylesheet -->
<link href="style/style.css" rel="stylesheet" media="screen"/>

```

When use jquery-ui for open a modal window, I realized that the content has it's "own" font-family and font-size, because of this rules:

```
.ui-widget input, 
.ui-widget select, 
.ui-widget textarea, 
.ui-widget button {
    font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
    font-size: 1em;
}

```

When debugging in Chrome (F12) I can "disable" this rules and gets the expected result. But I can't figure out how to do it in my custom stylesheet. I know that this would do the trick:

```
.ui-widget input, 
.ui-widget select, 
.ui-widget textarea, 
.ui-widget button {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
}

```

Or I can comment out the rules in the jquery-ui.css file. 
But I was looking for a way that, if later I decide to change the "base" font, I could make the change in one single place and don't modify the jquery-ui and bootstrap css files How can achieve this? How does the mechanism to "disable" rules in Chrome works?