Using Themes in ASP.NET, Web Forms, How to work with Theme in ASP.NET, Using CSS in Theme: Part 7
Introduction
CSS is stand for Cascading Style Sheet. Almost each and every .Net web developer aware about CSS but to use CSS file inside the App_Themes folder has some different meaning. We can use CSS files as an alternative to Skins; we can use a Cascading Style Sheet files to control the appearance of both the HTML elements and ASP.NET controls contained in a page. If we add a Cascading Style Sheet file to a Theme folder, then the Cascading Style Sheet is automatically applied to every page to which the Theme is applied. For example, the Cascading Style Sheet given below contains style rules that are applied to several different HTML and ASP control elements in a page.
html
{
background-color:gray;
font:14px Georgia,Serif;
}
.content
{
margin:auto;
width:600px;
border:solid 1px black;
background-color:White;
padding:10px;
}
CSS is stand for Cascading Style Sheet. Almost each and every .Net web developer aware about CSS but to use CSS file inside the App_Themes folder has some different meaning. We can use CSS files as an alternative to Skins; we can use a Cascading Style Sheet files to control the appearance of both the HTML elements and ASP.NET controls contained in a page. If we add a Cascading Style Sheet file to a Theme folder, then the Cascading Style Sheet is automatically applied to every page to which the Theme is applied. For example, the Cascading Style Sheet given below contains style rules that are applied to several different HTML and ASP control elements in a page.
html
{
background-color:gray;
font:14px Georgia,Serif;
}
.content
{
margin:auto;
width:600px;
border:solid 1px black;
background-color:White;
padding:10px;
}
h1
{
color:Gray;
font-size:18px;
border-bottom:solid 1px orange;
}
label
{
font-weight:bold;
}
input
{
background-color:Yellow;
border:double 3px orange;
}
{
color:Gray;
font-size:18px;
border-bottom:solid 1px orange;
}
label
{
font-weight:bold;
}
input
{
background-color:Yellow;
border:double 3px orange;
}
.button
{
background-color:#eeeeee;
}
If you add SimpleStyle.css named file to App_Themes\Simple folder, it will prompt you some message but you don't worry it will work as worked skin files in previous article parts.
Default.aspx File Code
<%@ Page Language="VB" AutoEventWireup="false"CodeFile="Default.aspx.vb"
{
background-color:#eeeeee;
}
If you add SimpleStyle.css named file to App_Themes\Simple folder, it will prompt you some message but you don't worry it will work as worked skin files in previous article parts.
Default.aspx File Code
<%@ Page Language="VB" AutoEventWireup="false"CodeFile="Default.aspx.vb"
Inherits="_Default" Theme="Simple"%>
<!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="content">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<h1>Login Form</h1>
<asp:Label
id="lblUserName"
Text="Username:"
AssociatedControlID="txtUserName"
Runat="server" />
<br />
<asp:TextBox
id="txtUserName"
Runat="server" />
<br /><br />
<asp:Label
id="lblPassword"
Text="Password:"
AssociatedControlID="txtPassword"
Runat="server" />
<br />
<asp:TextBox
id="txtPassword"
Runat="server"
TextMode="Password" />
id="lblUserName"
Text="Username:"
AssociatedControlID="txtUserName"
Runat="server" />
<br />
<asp:TextBox
id="txtUserName"
Runat="server" />
<br /><br />
<asp:Label
id="lblPassword"
Text="Password:"
AssociatedControlID="txtPassword"
Runat="server" />
<br />
<asp:TextBox
id="txtPassword"
Runat="server"
TextMode="Password" />
<br /><br />
<asp:Button
id="btnSubmit"
Text="Login"
CssClass="button"
Runat="server" />
id="btnSubmit"
Text="Login"
CssClass="button"
Runat="server" />
</div>
</form>
</body>
</html>
Remember to use Theme="Simple" in the header or say in <%@ Page......%> directive. Simple is just a folder name which is inside the App_Themes folder and by using Simple in any page header we call all the properties existed in Simple named directory and there could be css file or skin file. Here is the output of above work.
Above technique is very-very simple and hugely used in web applications.
Note: Continue in next part.
</form>
</body>
</html>
Remember to use Theme="Simple" in the header or say in <%@ Page......%> directive. Simple is just a folder name which is inside the App_Themes folder and by using Simple in any page header we call all the properties existed in Simple named directory and there could be css file or skin file. Here is the output of above work.
Above technique is very-very simple and hugely used in web applications.
Note: Continue in next part.
Comments
Post a Comment