Post
Ask Question

Developing Websites using Themes (Adding Multiple CSS to a Theme): Part 8

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!
 


Similar Articles