Implementing Styles, Themes, and Master Pages in ASP.NET Web Applications
ASP.NET offers multiple techniques for acheiving consistent page appearance in web applications. Styles, themes, and master pages are key tools for enhancing visual uniformity and user experience.
- Styles: Part of the CSS standard, styles are not exclusive too ASP.NET but are essential for applying consistent formatting across web projects.
- Themes: Themes provide uniform appearance settings specifically for server controls, similar to styles but targeted at server-side elements.
- Master Pages: Master pages define consistent layouts across a website, enabling reuse of common elements like headers and footers.
Applying CSS Styles in ASP.NET
Web applications using HTML face limitations such as inconsistent browser rendering and lack of standardized support. CSS addresses these issues by offering a comprehensive set of formatting properties compatible with modern browsers, allowing properties like borders and fonts to be applied to any HTML element. CSS is the primary presentation layer technology for web standards, widely used for page layout beyond basic styling.
To design a standards-compliant website, prioritize CSS over HTML tag formatting syntax.
Creating CSS Styles
Inline Styles
Inline styles are placed directly within HTML tags, which can lead to cluttered code. Example in an HTML file:
<p style="color:white; background:blue; font-size:x-large; padding:10px">
This text has a blue background.
</p>
Internal Style Sheets
Internal style sheets are placed in the head secsion of a web page, separating formatting from content and enabling reuse within the same page. Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CSS Demonstration</title>
<style type="text/css">
.textStyle
{
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
}
body
{
background-color: #c13d3d;
}
</style>
</head>
<body>
<form id="mainForm" runat="server">
<div>
<asp:TextBox id="InputBox" runat="server" CssClass="textStyle">
</asp:TextBox>
</div>
</form>
</body>
</html>
External Style Sheets
External style sheets store styles in separate files, allowing multiple pages to reuse the same styles and facilitating easy copying to other applications.
Steps:
- Create a new ASP.NET website.
- Add an HTML page to the project.
- Add a new style sheet file.
Link the style sheet in HtmlPage1.html:
<link href="ExternalStyles.css" rel="stylesheet" type="text/css">
HtmlPage1.html code:
<html>
<head>
<meta charset="utf-8" />
<title>External CSS Style Sheet</title>
<link href="ExternalStyles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="leftSection">
Left side text
</div>
<div id="rightSection">
Right side text
</div>
</body>
</html>
ExternalStyles.css code:
#leftSection
{
font-family: Verdana;
font-size: 20pt;
background-color: #ff6a00;
border-style: solid;
border-width: 2px;
width: 100px;
height: 300px;
float: left;
}
#rightSection
{
font-family: Verdana;
font-size: 10pt;
background-color: #00ffff;
border-style: solid;
border-width: 2px;
height: 300px;
float: right;
}
Applying CSS Styles
External CSS application has been demonstrated above. For more detailed usage, refer to CSS tutorials.
Themes in ASP.NET
Themes enable style switching, such as different skins in websites, by controlling server controls rather than HTML changes.
Creating Themes
In an application project, add a folder named App_Themes. This folder can contain multiple themes, each in a separate subfolder.
Steps:
Right-click the website project -> Add -> Add ASP.NET Folder -> Theme
Name the first folder DarkTheme and create another named LightTheme. Then, right-click a subfolder, add a Web Form Appearance file, and name it TextBox.skin.
Skin files include:
- .skin files
- CSS files
Applying Themes
Handling Theme Conflicts
Applying Themes to the Entire Website
Adding CSS Styles to Themes
Dynamically Applying Themes
Master Pages in ASP.NET
Master pages function like templates in Word, alllowing shared content across multiple pages, such as logos, to simplify maintainance and ensure a consistent look.
Creating Master Pages
Master pages are similar to regular pages and can contain files, images, HTML controls, web server controls, and code-behind. They have a .master extension and cannot be viewed directly in a browser; they must be used by other pages to display.
Creation: Default code:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="SiteTemplate.master.cs" Inherits="WebAppMaster.SiteTemplate" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<asp:ContentPlaceHolder ID="headerContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="mainForm" runat="server">
<div>
<asp:ContentPlaceHolder ID="mainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
To add multiple ContentPlaceHolder controls, drag them from the toolbox.
- Modified master page content:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="SiteTemplate.master.cs" Inherits="MasterPageExample.SiteTemplate" %>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Master Page Example</title>
<asp:ContentPlaceHolder ID="headerContent" runat="server">
</asp:ContentPlaceHolder>
<link href="MasterStyles.css" rel="stylesheet" type="text/css">
</head>
<body>
<form id="mainForm" runat="server">
<div id="container">
<div id="topArea">
<asp:ContentPlaceHolder ID="topContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="leftArea">
<asp:ContentPlaceHolder ID="leftContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="rightArea">
<asp:ContentPlaceHolder ID="rightContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
</html>
- Master page CSS styles:
body {
background-color: #64E9E5;
margin: 0px;
height: 100%;
}
#container {
background-color: #E8E8EF;
width: 600px;
height: 100%;
margin:0px auto;
top: 0px;
}
#topArea {
top: 0px;
width: 100%;
height: 100px;
background-color: #E3FDE4;
}
#leftArea {
background-color: #CCCC00;
float: left;
width: 200px;
height: 100%;
}
#rightArea {
height: 100%;
background-color: #FFCCCC;
}
- Web form code using the master page:
<%@ Page Title="" Language="C#" MasterPageFile="~/SiteTemplate.Master" AutoEventWireup="true" CodeBehind="WebPage1.aspx.cs" Inherits="MasterPageExample.WebPage1" %>
<asp:Content ID="headerSection" ContentPlaceHolderID="headerContent" runat="server">
</asp:Content>
<asp:Content ID="topSection" ContentPlaceHolderID="topContent" runat="server">
<h2>Master Page Example Application</h2>
</asp:Content>
<asp:Content ID="leftSection" ContentPlaceHolderID="leftContent" runat="server">
<h3>Left Sidebar</h3>
</asp:Content>
<asp:Content ID="rightSection" ContentPlaceHolderID="rightContent" runat="server">
<h3>Right Sidebar</h3>
</asp:Content>
Default Content
Master pages can have default content that can be overridden by new controls.
Master Pages and Relative Paths
(1) Convert image resources to server controls. (2) Other HTML controls can also utilize server control features. (3) Convert absolute paths to relative paths.
Configuring Master Pages in web.config
Define master pages in the web.config file to apply them to all files or specific ones in the website. If a content page lacks any content controls, the master page is automatically ignored.
Configuration code:
<configuration>
<system.web>
<pages masterPageFile="~/MasterPages/MainTemplate.master"/>
</system.web>
</configuration>
Modifying Master Pages
Some pages may want to override master page displays. Modify the Title property in the Page section or programmatically, or use CSS styles.
Dynamically Loading Master Pages
Nesting Master Pages
Master pages can be nested within each other. While ASP.NET supports multiple levels of nesting, excessive use can lead to maintenance difficulties. It is generally recommended to use only one level of nesting.
