How can I override an external css?

Question

I'm using the YUI Javascript framework, which gives me a calendar widget that comes with a css file. These are included at the top of my Site.Master file. I'd like to override the style associated with the widget, but I can't seem to figure out how.

I've tried adding an entry for the widget's class:

.yui-calendar
{
 height:10;
 width:10;
}

in both my local css file, and in a style tag in the master file. When I use Internet Explorer's developer tools to look at the page's style, it lists 3 sources for that class's style: my local css file, the ASP.Net view for the page, and the external YUI css. It never references the master file, and even when I've got the class in my local css file, the style doesn't appear in the developer tools list of styles (I don't see .yui-calendar in the list it gives me).

So the question is, what's the proper way to override the style for the class coming in from the external css file?

Answer 1

I think you want to use !important (not sure though). See this page.

Answer 2

An inline style overrides any CSS style declaration.

So something like this:

<div class="yui-calendar" style="height:10px;width:10px;"></div>

The inline style would override any external definition in this case.

As Jason S noted also, the !important attribute is a way for your local stylesheet rule to override any external declarations. Actually, this is probably the better of the 2, but they both work.

Answer 3

Try to add !important at the end of each line of your style definition:

.yui-calendar
{
  height: 10 !important;
  width: 10 !important;
}

This will declare that your style definitions are higher-priority than the YUI ones. The W3c document explaining the use of !important is here.

Answer 4

The visible CSS is determined in this order:

1)External style sheet

2)Internal style sheet (style tags)

3)Inline Style

4)User Defined Style Sheet

5)External Style Sheet with !important

6)Internal Style Sheet with !important

7)Inline style with !important

8)User Defined style with !important

The lowest one on that list which is declared will be the one that is used.

As a note, it is bad form to use !important as this can override user style sheets used by the visually impaired and can drastically reduce accessability/usability for these groups.

Answer 5

You might want to try adding units to that CSS:

.yui-calendar
{
 height:10px;
 width:10px;
}

You need units for values other than 0 in CSS.

Answer 6

Paul Waite's answer should probably sort it out.

If not have you checked that YUI is not creating either inline styling or some other element that you're not targeting yet?