.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

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>

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.

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.