Apply Styles to Web Controls

There are different ways to apply styles on Web controls. One of the most commonly used method is using style sheets. You can also apply styles of Web controls programmatically and the .NET Framework class library provides classes to do so. In this article, I will show you how you can use the .NET Framework class library's Web classes to create and apply styles on Web Controls programmatically. 

The System.Web.UI.WebControls.Style Class

The Style class defined in the System.Web.UI.WebControls namespace represents the style of a Web server control. This class provides the properties that can be used to set the appearance of a Web server control and can be applied to multiple Web server controls to provide a common appearance. Using these properties, you can set the background, foreground colors, border width and border styles and size of the Web server control. Table 1 describes the Style class properties. 

Table 1. The Style class properties

WebControl ctrl;
Style s;
// Set the Style properties here
...........
// Apply Style
ctrl.ApplyStyle(s); 

The Example 

Now I will show you how to apply styles on Web controls. To test this,  I create a Web application using Visual Studio .NET and add three controls to the Form - a Button, a TextBox, and a ListBox. I also change the properties of the Button control and add few items to the ListBox using the Collection property of ListBox from the Properties window. The final Web Form page looks like Figure 1.

Now I create two methods - CreateStyle and SetControStyle. The CreateStyle method takes seven parameters for style such as background color, foreground color, border width, and font styles. This method returns the Style object as you can see from Listing 1.

The SetControlStyle method takes two parameters - WebControl, and Style and calls the ApplyStyle method of WebControl as you can see from Listing 1. 

Listing 1. 

Now I create the Set Style button click event handler by simply double clicking on the button. On this button click event handler, I call CreateStyle and SetControlStyle methods for different controls as you can see from Listing 2. 

Listing 2.

Now when I run the sample and click the Set Style button, the final Form looks like Figure 2. 

Conclusion

In this article, you saw how easy is it to apply styles to Web controls programmatically.