Question

I am using ASP.NET MVC 3 with the Razor engine together with the newest version of the Telerik MVC controls.

In telerik.webblue.min.css there are 2 styles, namely t-button and t-state-default. It is implemented on a button element like this:

<button class="t-button t-state-default" type="submit">Apply</button>

I don’t want to use a class attribute to specify which styles to use, I want to specify it in my own stylesheet that all button elements must use these 2 styles. I tried the folowing in my stylesheet but it doesn’t work:

button,.t-button,.t-state-default{}

So all that I want to have in my markup is:

<button type="submit">Apply</button>

How would I do this?

UPDATE

When I view source this is what I see:

<link href="/Assets/yui_2.9.0/yui/build/reset-fonts-grids/reset-fonts-grids.css" rel="stylesheet" type="text/css">
<link href="/Assets/telerikaspnetmvc/2011.2.712/Content/telerik.common.min.css" rel="stylesheet" type="text/css">
<link href="/Assets/telerikaspnetmvc/2011.2.712/Content/telerik.webblue.min.css" rel="stylesheet" type="text/css">
<link href="/Assets/Stylesheets/hbf.css" rel="stylesheet" type="text/css">

In Firebug when I select the button it shows the top most style for this button as:

button, .t-button, .t-state-default {
}

hbf.css (line 26)

Answer 1

This should work.

However, you could place all the styles from

.t-button,.t-state-default {}

into a single rule labeled

button {}

EDIT

I think I see the problem, based on your update. (If I understand it correctly)

This

button, .t-button, .t-state-default {
}

appears in your hbf.css

However, it is styling nothing. button is not able to reference the other styles that way.

The .t-button, .t-state-default are still receiving styles from the telerik.webblue.min.css stylesheet.

In order to make it work, you need to add button to the telerik.webblue.min.css stylesheet.