Cascading Style Sheet in ASP.NET
Cascading Style Sheet[css]
Stylesheet is a collection of characteristics which can be applied to html tag (or) webserver control
Ex:background-color, color, font-size [characteristics]
The stylesheet declared with in css file is called “cascading stylesheet”
Syntax for stylesheet declaration:
Tagname
{
Characteristics
}
.classname
{
Characteristics
}
Tagname characteristics will be applied to same tag occurances
.classname characteristics can be applied to any html tag (or) webserver control
EX:<h2 class=”classname”>…..</h2>
<h3 class=”classname”>…</h3>
Label control->css class=classname
Working with cascading stylesheet requires 2 steps
1.creating css file
2.linking css to webpage using “link html tag”
Example on cascading stylesheet
Goto visual studio
Start->run->devenv
It will display main window of visual studio
File menu->new->website->visual c#->select asp.net empty website
Weblocation->e:\aspnet\csssite[drive:\dir\websitename]
Visual studio create a folder with website name, in this folder website related files will be placed
Create css file into website
Goto view menu and select solution explorer
Right click on website path and select add new item
Select stylesheet template
Give name as styles.csc
body
{
background-color:Lime;
}
.c1
{
background-color:red;
color:White;
border-width:thick;
border-style:groove;
font-size:x-large;
}
Add webform
Goto view menu and select solution explorer
Right click on website path and select add new item
Select webform
Give name as register.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="register.aspx.cs" Inherits="register" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
Goto design view
palce label control
Place hyperlink control
Label properties
Text-register info
Hyperlink1 properties
Text-login
Navigate url-login.aspx
Linking css file with webpage:
Goto source view
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="register.aspx.cs" Inherits="register" %>
<!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">
<link rel="Stylesheet" type="text/css" href="Styles.css" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="register info"></asp:Label>
<br />
<br />
<br />
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="login.aspx">login</asp:HyperLink>
</div>
</form>
</body>
</html>
Goto design view
Label1 properties
Cssclass-c1
Goto contl F5
Note:
->in realtime scenario webdesigner will work with stylesheet.
->asp.net developer will not be comfortable with stylesheet characteristics, stylesheet characteristic names will not be same as webserver controls property names
Ex:backcolor-color[characteristic]
Backcolor[label][propertyname]
The solution provided by Microsoft with asp.net2.0 is theme and skin concept
theme& skin
1)theme is a collection of css & skin files
2)css file will contain html tags characteristics
3)skin file will contain webserver controls
Properties
->Website can have any number of themes, this theme should be placed into app_themes folder
->theme and skin provides look & fell similar to webserver controls through out website & maintenance will be easier
Working with theme & skin requires 2 steps
1.creating theme
2.attaching theme to webpage
This requires an option with page directive
Syntax:
Example on theme & skin
Goto visual studio
Start->run->devenv
It will display main window of visual studio
File menu->new->website->visual c#->select asp.net empty website
Weblocation->e:\aspnet\themesite[drive:\dir\websitename]
Visual studio create a folder with website name, in this folder website related files will be placed
Create theme into website
Goto view menu and select solution explorer
Right click on website path and select asp.net folder
Select theme
It will create app_themes folder and theme1 into folder
Create css file into theme
Goto view menu and select solution explorer
Right click on website path and select add new item
Select stylesheet template
Give name as styles.css
body
{
background-color:Lime;
}
creat skin file into theme
Right click on theme1 and select add new item
Select skinfile template
Give name as skinfile.skin
<%--
Default skin template. The following skins are provided as examples only.
1. Named control skin. The SkinId should be uniquely defined because
duplicate SkinId's per control type are not allowed in the same theme.
<asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" >
<AlternatingRowStyle BackColor="Blue" />
</asp:GridView>
2. Default skin. The SkinId is not defined. Only one default
control skin per control type is allowed in the same theme.
<asp:Image runat="server" ImageUrl="~/images/image1.jpg" />
--%>
<asp:label runat="server" backcolor="red" forecolor="white" font-size="x-large"/>
<asp:panel runat="server" height="100" width="100" font-size="large" backcolor="maroon" forecolor="white" scrollbars="vertical"/>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="login.aspx.cs" Inherits="login" %>
creating webpage into website
Right click on website path and select add new item
Select webform
Give name as login.aspx
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
goto design part
logininfo[label1]
panel username[label2]
register[hyperlink]
navigateurl-register.aspx
design the form like above
->place a cursor into panel and type required news information, see to that content is more
Attaching theme to webpage
->goto source view of login.aspx
->1st line will be page directive, include theme option
<%@ Page Language="C#" Theme="Theme1" AutoEventWireup="true" CodeFile="login.aspx.cs" Inherits="login" %>
Add webform
Goto view menu and select solution explorer
Right click on website path and select add new item
Select webform
Give name as register.aspx
Goto design part
Place label [register info]
Goto source view of login.aspx
->1st line will be page directive, include theme option
<%@ Page Language="C#" Theme="Theme1" AutoEventWireup="true" CodeFile="register.aspx.cs" Inherits="register" %>
Right click on login.aspx as start page
Goto contrl F5
Note:
1)When the theme is attached to webpage, the control properties present with in skin file will be applied to same control declaration present with in webpage
2)This provides reusability of control properties through out website & maintenance will be easier
3)Disabling theme to a particular control occurance is possible, this requires setting enable themeing property
->goto login.aspx
->goto label2[username] properties
Enable theming-false
->goto contrl F5
