Kumar
42010
42
10/20/2010 (IST)
7
Download Source Files:
Introduction
Now a days we can see the content of webpages in diferent styles. It may be background color, text color, text size or a image. This can achieved by using a style sheet very easily.
Style sheet is a set of characteristics to external functionality(formating features) of a tag. Style sheets consist of a number of rules that define how various web page elements should be displayed. Style sheet can be classified into 3 types.
- Inline style sheet.
- Embedded style sheet.
- Cascading style sheet.
Inline style sheet : The style sheet attached to particular occurrence of tag is called inline style sheet.
Ex: < h1 style="background-color:red;color:blue" >codemyne< /h1 >
The above example makes header1 tag background color to 'Red' and font-color to 'Blue'
Embedded style sheet : The style sheet attached to particular webpage is called embedded style sheet. This will be applied to all the occurrences of tag within webpage.
Example 1:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Using Embedded Style sheet in Asp.Net by http://codemyne.net</title> <style type="text/css"> body { background-color:#eeeccc; } h1 { font-family:Trebuchet MS,Verdana; font-size:20px; color:Maroon; } h2 { font-family:Trebuchet MS,Verdana; font-size:16px; color:Blue; } </style> </head> <body> <form id="form1" runat="server"> <div> <h1>Welcome to Embedded Style sheets in Asp.Net</h1> <h2>These two lines are formatted using Embedded Style sheet</h2> </div> </form> </body> </html>
Style sheet with classes : It is required to define more than one style sheet for a single tag.
Example 2:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Using Embedded Style sheet with classes in Asp.Net by http://codemyne.net</title> <style type="text/css"> body { background-color:#eeeccc; } h1 { font-family:Trebuchet MS,Verdana; font-size:20px; color:Maroon; } h1.c1 { font-family:Trebuchet MS,Verdana; font-size:20px; color:Red; } h1.c2 { font-family:Trebuchet MS,Verdana; font-size:16px; color:Blue; } </style> </head> <body> <form id="form1" runat="server"> <div> <h1>Welcome to Embedded Style sheets with Classes in Asp.Net</h1> <h1 class="c1">This line is formatted using class c1</h1> <h1 class="c2">This line is formatted using class c2</h1> </div> </form> </body> </html>
Cascading style sheet : The style sheet defined within a CSS file is called Cascading Style Sheet. This provides uniformity of tags appearance throughout website and maintenance will be easier.
In Asp.Net, Cascading style sheet can be created by using StyleSheet template. For this see the following steps:
- In Solution Explorer, right click on Project and select 'Add New Item'.
-
In Add New Item window, select StyleSheet template and cilck on Add as shown below.
-
This Style sheet is attached to an HTML document or .Aspx page into the head section as shown below.
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
- Finally copy and paste the below given code in respected pages to view the output.
Example 3:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!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 id="Head1" runat="server"> <title>Using Cascading Style sheet in Asp.Net by http://codemyne.net</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <div> <h1>Welcome to Cascading Style sheets in Asp.Net</h1> <h1 class="c1">This line is formatted using class c1</h1> <h1 class="c2">This line is formatted using class c2</h1> </div> </form> </body> </html>
body
{
background-color:#eeeccc;
}
h1
{
font-family:Trebuchet MS,Verdana;
font-size:20px;
color:Maroon;
}
h1.c1
{
font-family:Trebuchet MS,Verdana;
font-size:20px;
color:Red;
}
h1.c2
{
font-family:Trebuchet MS,Verdana;
font-size:16px;
color:Blue;
}
The style sheet is applicable to only html tags. This concept is extended in ASP.NET 2.0 for server side controls. This is called THEME and SKIN concept.
THEME and SKIN : Theme is a collection of skin files. Skin file will contain properties of different controls. The theme can be attached to webpage the controls placed on webpage will be applied with properties defined within skin file.
Note : The changes to control properties within skin file will be applied to all the occurances of control throughout website.
This provides better maintenance with reusability.
Theme & Skin features and thier usage will be explained in another article.
Comments/Suggestions are invited. Happy coding......!
Comments Post a Comment
Padmanabhan 12/28/2011 (IST) / Reply
Its work fine in Firefox but i got flickering In IE when focused in Password field
johnson 11/19/2012 (IST) / Reply
nice
nazeercs35 12/4/2012 (IST) / Reply
i want rich style sheet
nazeercs35 12/4/2012 (IST) / Reply
sdfsd
brajesh pal 12/6/2012 (IST) / Reply
Thank you sir providing the solution.......
sorabh 2/17/2013 (IST) / Reply
i want a source code of social networking website so that i can explore it..........in c#
pankaj 3/3/2013 (IST) / Reply
ruheru