ARTICLE
Adding CSS to Themes in ASP.Net
Cascading Style Sheets (CSS) load pages faster and leaner, this is main advantage of CSS file. CSS is alternative of skins, to change the appearance of ASP.Net control and HTML element using CSS file. If you add CSS file in Theme folder than it’s automatically applied on all pages of your application. CSS used to style HTML element. ASP.Net render HTML this is the reason that CSS file easily apply on ASP.Net control.
Download
Files:
Cascading Style Sheets (CSS) load pages faster and leaner, this is main advantage of CSS file. CSS is alternative of skins, to change the appearance of ASP.Net control and HTML element using CSS file. If you add CSS file in Theme folder than it's automatically applied on all pages of your application. CSS used to style HTML element. ASP.Net render HTML this is the reason that CSS file easily apply on ASP.Net control.
Suppose you change a few property of one label control, whenever you request page only additional properties must be rendered to the browser but in case of SKIN file first all label property change in application then after that label rendered to the browser, so we can say CSS faster as compare to SKIN file.
Using CssClass attribute of ASP.Net control you can apply any style by target any control. In this example, I have applied different appearance on all controls using style sheet. First must be look blue and second label must be look green. One interesting thing, Look at the output in figure3 you will notice that password is displaying in white color because I set its color property white in CSS file.
Step1: Add Theme by adding a new folder to a special folder in your root application. Right clicking on project in Solution Explorer drag your mouse on Add Asp.Net Folder you will see Theme option in list and click on that. See the below figure to know how to add theme in application. Different themes should be added on different folder in App_Themes folder. You can add multiple subfolders in Theme folder. A theme file contains different type of files but Skin and CSS file is most important file in Theme folder.
Figure 1
Step 2: After adding Theme Folder add CSS file on that folder, right click on theme folder than click on Add New Item and select StyleSheet file from dialog box.
Figure 2
Login.aspx
<%@ Page Language="C#" StylesheetTheme="Theme1" AutoEventWireup="true" CodeFile="LoginPage.aspx.cs" Inherits="LoginPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="area">
<asp:Label ID="Label1" CssClass="labl" runat="server" Text="User Name"></asp:Label>
<asp:TextBox ID="TextBox1" CssClass="txtbox1" runat="server"></asp:TextBox>
<br />
<br />
<asp:Label ID="Label2" CssClass="labl2" runat="server" Text="Password"></asp:Label>
<asp:TextBox ID="TextBox2" CssClass="txtbox2" TextMode="Password" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" CssClass="btn" runat="server" Text="Sign In" />
</div>
</form>
</body>
</html>
App_Themes/Theme1/StyleSheet.css
html
{
background-color:Silver;
}
.area
{
margin-left:100px;
width:300px;
height:180px;
background-color:White;
}
.labl
{
margin-left:20px;
color: Blue;
font-size: 15px;
}
.labl2
{
margin-left:20px;
color: Green;
font-size: 15px;
}
.txtbox1
{
margin-left: 50px;
margin-top: 10px;
background-color: Yellow;
border-style: dashed;
}
.txtbox2
{
margin-left: 60px;
margin-top: 20px;
background-color: Aqua;
border-style:dashed;
border-color:Black;
color:White;
}
.btn
{
background-color:Fuchsia;
margin-top:40px;
margin-left:100px;
}
Output:
Figure 3