How to Create and Apply styles to master page in ASP.NET

Rate this article

0 out of 5

In this video tutorial we will show you Creating style sheet and applying the styles to the master page in asp.net

Main Source Code

StyleSheet.css

body
{

background-color: #909090;
font:Verdana, Geneva, sans-serif;
}
.header
{
background-color: Blue;
width:100%;
line-height:30px;
height:40px;
color:#FFF;
}
.container
{
margin:10px 20px 10px 20px;
background-color:#000;
padding-top:15px;

}
.menu
{
background-color:#F5F5F5;
width:100%;
margin:0 0 0 0;
line-height:20px;
border-color:#000;
height:60px;
}
ul
{

}
ul li
{
display:inline;
float: left;
padding-right:20px;
padding-top: 10px;
line-height:30px;

}
ul li a
{
display:inline;
float: left;
padding-right:5px;
text-decoration: none;
color: Black;
padding-left:10px;
padding-right:10px;

}
ul li a:hover
{
background-color:#0CF;
padding-left:10px;
padding-right:10px;
}
.clear
{
clear:both;
height:20px;
}
.content
{
float:left;
background-color:#FFF ;
margin:0 50px 0 50px;
width:1000px;
height:500px;
padding-left:43px;

}
.footer
{
background-color: Blue;
width:100%;
margin:10px 0 0 px;
line-height:12px;
border-color:#000;
}

Master Page.aspx

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="header">
HEADER
</div>
<div class="menu">
<ul id="menu" >
<li>
<a href="" class="select" >Home</a>
</li>
<li>
<a href="Default2.aspx" class="select">Content1</a>
</li>
<li>
<a href="Default.aspx" class="select">Content2</a>
</li>
</ul>
</div>
<div class="clear"></div>

<div class="content">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</div>
<div class="clear"></div>
<div class="footer">
<div>FOOTER</div>
</div>
<div class="clear"></div>
</div>
</form>
</body>
</html>

Default.aspx

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<div style="background-color:Brown; font-size:larger;">
Content page 1
</div>
</asp:Content>

Default2.aspx

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

Content page 2
</asp:Content>