.skin vs .css from asp.net

Question

What is the main difference between .skin and .css in asp.net?

.skin is new enhancement of IDE. I have been working with .css. What is available in .skin that is not to .css

thanks, saj

Debor

Answer 1

In the skin file you can set properties of asp.net controls.

For example,

<asp:TextBox runat="server" Width="200"/>

All the TextBox controls in your application will have width 200.

You can give it a name and only the controls you like you can set them to apply a skin for example,

<asp:TextBox SkinID="MultiLineTextBox" runat="server" TextMode="MultiLine" Height="240"/>

now in a web page when adds TextBox control you can set its SkinID to be "MultiLineTextBox" as the following,

<asp:TextBox runat="server" SkinID="MultiLineTextBox"/>

and thus it will inherit the TextMode as MultiLine and the Height as 240.

To use the skin you have to add a theme to your application under the App_Themes folder and there you add the skin file, now to use this theme in your pages you have to set the EnableTheming property of the page to true, StylesheetTheme or Theme to the name of your theme. You can also set this properties in the config file.

Setting the theme in the page aspx,

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" EnableTheming="true" StylesheetTheme="Your Theme Name" %>

Setting the theme in the web.config,

<configuration>
   <system.web>
     <pages styleSheetTheme="Your Theme Name"></pages>
   </system.web>
</configuration>

Rembrandt

Nice explanation: But i got an error when i try to use.. the error is..A SkinID has been specified but the page is not configured to use a page theme or stylesheet theme. This is acceptable if the theme or stylesheet theme will be set programmatically. For .css we have to give link from aspx page.. there is no type like skin when i try to give link..now how can i access .skin file – Debor

I updated the post to explain how to use the theme and the skin file – Rembrandt

Correct me if I'm wrong but you should use SkinID="MultiLineTextBox" attribute not only when refer to the skin in the asp:Button but also to when you define the skin. (second code line). Nice answer anyway. – Weikert

It's a nice article in the beginning i was struggled to set skin later understood clearly and getting expected result – Clyte

@A_Nablsi instead of using: <pages styleSheetTheme="Your Theme Name"></pages> You can also use: <pages theme="Your Theme Name"></pages> Am I right, and if so, is there a difference? – Aristarchus

Answer 2

Note that in terms of what these two things actually do there is a considerable difference. Any properties set in the .skin file are copied out to all of the page controls. An advantage to using Cascading Style Sheets is that the information is loaded and cached once. (and can be applied to multiple web pages.) Skin files can cause page bloat because all the properties set in the skin file must be merged with every affected control every time the page is rendered.

Additionally, the default behavior of the ASP.NET Theme .skin files is to override the properties of the controls being affected (this can be an unexpected behavior). For example, if you set the Width property for all ASP:Labels in your .skin file, all the ASP:Labels that use the skin file will have their Width properties set to that of the .skin file's regardless of the control's individual Width setting. To avoid this behavior, the ASP.NET StyleSheetTheme can be used to allow control-level properties to override the global .skin properties.

Woodenware

I don't understand: are you saying that all compiled ASPXs get an initialisation section with all the skin properties? That's all done on the server side isn't it, and once? So why does it matter? – Rucker

It is done server side. However, it is done every time the page is requested; which adds some overhead. – Botryoidal

Thanks @Chris yes, the properties are added server-side to each control, which increases the page size. – Woodenware

Answer 3

You can set some properties like Width even in CSS. Apart from being able to set properties that CSS cannot, there are some things you need .skin file for.

Consider an example where you need all the asp:Label controls on your page to be in blue color. A asp:Label is actually text inside a span, thats inside a hidden div. This is why we are able to set some properties like BackColor to this asp:Label and why the standard label control does not have a 'BackColor' property.

So, if you try to set font color to all ASP Labels through CSS,

then something like

Label {
color: Blue; 
}

Will not work. On the other hand, using a skin file you can write

 <asp:Label runat="server" ForeColor="Blue"></asp:Label>

and this will set all Labels to blue color.

Gules

If you set the 'AssociatedControlID' property on the asp:Label then your Label CSS will work because the asp:Label will render as a label instead of a span. Also, you could define a "label" skin that applies a "label" class to the rendered span. jsfiddle.net/JamVw – Philander