Introduction
In Part
7 of this article series we have seen that how to use single CSS file to
a theme. Now in this article we have multiple CSS files as given below
![Website8.gif]()
Don't worry about the multiple CSS files because we have placed all files in the
same directory named App_Themes/Simple. So, these all CSS files will be treated
as single. I have used the name of all CSS files like SimpleStyle-A.css,
SimpleStyle-B.css and SimpleStyle-C.css but you can use it as you wish. Using
multiple CSS files has only one benefit that is all the css elements inside are
separately and can be maintained very easily they has no any cross references.
Here is the image of output as we have seen in previous part but after broking
single css file in multiple has also the same result.
![Website9.gif]()
We have another option to use
<link
href="App_Themes/Simple/SimpleStyle-A.css"
type="text/css"
rel="stylesheet"
/>
<link
href="App_Themes/Simple/SimpleStyle-B.css"
type="text/css"
rel="stylesheet"
/>
<link
href="App_Themes/Simple/SimpleStyle-C.css"
type="text/css"
rel="stylesheet"
/>
above all are the another way to accomplish such task. If you are using above
coding then there is no need of using Theme="Simple" at the top.
App_Themes\Simple\SimpleStyle-A.css File Code
html
{
background-color:gray;
font:14px
Georgia,Serif;
}
.content
{
margin:auto;
width:600px;
border:solid
1px black;
background-color:White;
padding:10px;
}
App_Themes\Simple\SimpleStyle-B.css File Code
h1
{
color:Gray;
font-size:18px;
border-bottom:solid
1px orange;
}
label
{
font-weight:bold;
}
App_Themes\Simple\SimpleStyle-C.css File Code
input
{
background-color:Yellow;
border:double
3px orange;
}
.button
{
background-color:#eeeeee;
}
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>
<link
href="App_Themes/Simple/SimpleStyle-A.css"
type="text/css"
rel="stylesheet"
/>
<link
href="App_Themes/Simple/SimpleStyle-B.css"
type="text/css"
rel="stylesheet"
/>
<link
href="App_Themes/Simple/SimpleStyle-C.css"
type="text/css"
rel="stylesheet"
/>
</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"
/>
<br
/><br
/>
<asp:Button
id="btnSubmit"
Text="Login"
CssClass="button"
Runat="server"
/>
</div>
</form>
</body>
</html>
Note: Continue in next part.
HAVE A GREAT CODING!