Stylesheet in ASP.NET

Question

Hi I want to know how to use various types of stylesheet in asp.net ? Please tell me anyone with an examples of stylesheet in asp.net ?

Satyapriya Nayak · Answer

Hi Vineet CSS stands for Cascading Style Sheet CSS is used to apply common look and feel for your web application 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: codemyne 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 MSVerdana; font-size:20px; color:Maroon; } h2 { font-family:Trebuchet MSVerdana; 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 MSVerdana; font-size:20px; color:Maroon; } h1.c1 { font-family:Trebuchet MSVerdana; font-size:20px; color:Red; } h1.c2 { font-family:Trebuchet MSVerdana; 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: Default.aspx StyleSheet.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 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 MSVerdana; font-size:20px; color:Maroon; } h1.c1 { font-family:Trebuchet MSVerdana; font-size:20px; color:Red; } h1.c2 { font-family:Trebuchet MSVerdana; font-size:16px; color:Blue; } Please refer the below links http://www.codemyne.net/articles/how-to-use-a-stylesheet-in-aspdotnet.aspx?visitid=27&type=2 http://www.w3schools.com/aspnet/prop_webcontrol_style_cssclass.asp http://www.beansoftware.com/ASP.NET-Tutorials/CSS-ASP.NET.aspx http://dotnetguts.blogspot.in/2007/09/applying-css-to-aspnet-application.html Thanks