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><!--end of container-->
    </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">
<!--adding a basic page style-->
<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">
<!--no style style-->
Content page 2
</asp:Content>






Download

Author :
Manu Manu
Joined Date :12-Jun-2014
Articles
Posted
1
Messages
Posted
0

   
Messages
Posted:
Post Your Comments
Name (Max 50 Chars)
Comments
   Design  HTML

TekTipsDownload
GateExam
Academic Projects
TekTipsExperts



 
Site optimized for IE7, 1280 X 768 and above. Copyright © 2010 - 2018 KTS InfoTech
Site Developed Using KTS WebCloud