Skin theming and CSS Class

If I am assigning a paricular css class to a control ,it hnherits the class but if i simultaneously give the skin id to the same control then this skin ID overrides the CSS class. Why this is happening?

Now if I am using !important in the css stylesh开发者_开发知识库eets then css class property is inherited by the control. .lblUserName1 { width: 400px; line-height: 32px; color: Red !important; font-weight: bold; background-color: #669999; } Please help me...Its creating a heap of confusion..

You should avoid using !important; were you can. Basically it is recommended that you use it only when you are overriding some pre-loaded styles that you can't really change.

ID is basically superior to class. Check the answer marked as correct here: CSS class priorities

Skin probably uses inline CSS in style attribute of your control this way due to CSS herarchy what you define in skin theme will override what you have defined in class which resides external .css file.

Best way to debug CSS and HTML is viewing the code itself.

There is another solution - Use StyelSheetTheme attribute. When applying your theme in the web.config or (page) file as Theme attribute:

<pages Theme="myTheme">

any local cssClass control will be overridden.

However:

<pages StyleSheetTheme="myTheme">

will be secondary meaning the control will keep its assigned cssClass attribute.

So, unfortunately you can't have both (it would have been nice), but you can at least make the theme the secondary choice instead of having the theme override local cssClass settings.