Tuesday, November 20, 2007

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.

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.