Cascade Style Sheet in ASP.NET

Cascade Style Sheet (CSS) in ASP.NET

Cascade Style Sheets are used to give unique look and feel to web applications or throughout the websites or to all the web sites running on a server. Cascade Style Sheets give a ‘style of how the page looks like and what color combinations should the controls of the page should bear. Cascade Style Sheet (CSS) is only associated with the presentation of a web page. It has nothing to do with the functionality or logic of the web site. This quick tutorial outlines the ways to use Cascade Style Sheet in ASP.NET.

Why to use Cascade Style Sheet (CSS)?

1. Consistent look and feel of controls in a page.
2. Unique interfaces throughout the website.
3. Easy to apply same style to all controls.
4. Applying and editing style and theme changes to overall website made easier.

Creating Cascade Style Sheet in Visual Studio 2005

1. Right click the website in the solution explorer.
2. Click Add New Item.
3. Choose Style Sheet from the Visual Studio Installed Templates.
4. Give the cascade style sheet a name. Click OK.

Now we have a cascade style sheet. We define the body section of the cascade style sheet. Insert following code into the body:

body
{
color:Blue;
Background:Gray;
}

Create a class below the body section as below:

.myControl
{
color: Green;
background:Gray;
}

Here the class name is myControl. You can use your own class name. You can make as many classes as you wish with necessary properties set. For the properties available for Cascade Style Sheet you can read references at the bottom of this quick tutorial.

Applying Cascade Style Sheet

Now we have a simple Cascade Style Sheet. We can apply it to any control or the whole page itself.

Applying Cascade Style Sheet to a control

1. Right click the control in which to use the cascade style sheet.
2. Go to properties.
3. Right to the CssClass, give the name of the class (myControl in our case).
4. Save changes.

The change can be seen in the layout of the control you used the style sheet in.

Note: Only those controls having physical appearance can use cascade style sheet, like textbox, label, button etc. This can not be used to the ones which remain hidden.

Applying Cascade Style Sheet in a page

It is quite easy. Just drag the Cascade Style Sheet from the solution explorer into the page. It will work.