Introduction
One of the most popular ways of styling a web application is by using general theme tools in ASP.NET and Visual Studio IDE and building one or more themes for each web pages or web site presentation. Another way is using style sheets without themes; this is the oldest technique which the web developers used before. But ASP.NET serves a new method of styling web application to performing a nice means of presentation of the page. This new tool is using Themes in your pages because the themes have a better feature than classic style sheets.
Background
ASP.NET provides HttpLink class that can be useful for creating a dynamical link tag and then adding them to the header of the page.
Link tag is one of the most useful tags for linking the external resource to the page such as CSS (Cascading Style Sheet) for example:
<HTML>
<HEAD>
<TITLE>Welcome To My Web Site</TITLE>
<LINK href="mystyle.css" type="text/css" rel="Stylesheet" />
</HEAD>
<BODY>
.
.
.
</BODY>
</HTML>
In this example, a CSS file "mystyle.css" is attached to the page statically.
Now, I declare an instance of the HtmlLink class and then fill the attributes of the object and then add this control to the header of the page dynamically.
protected void Page_Load(object sender, EventArgs e)
{
HtmlLink linkCss = new HtmlLink();
linkCss.Attributes.Add("href", "AppStyles/StyleSheet.css");
linkCss.Attributes.Add("type", "text/css");
linkCss.Attributes.Add("rel", "Stylesheet");
Page.Header.Controls.Add(linkCss);
}
Now when the ASP page is loaded, the link tag is dynamically added to the page and style can be rendered.
In this example, I create a CSS file in the directory of the AppStyles and name it to StyleSheet.css and then dynamically create an HTML control (HtmlLink) and define attributes of the link tag and then add them to the header of the page in the load event of the page.
This technique usually works, but sometimes in different browsers with different versions, it can have some problems which are difficult to solve.
Using the Code
The next technique is using the ASP Themes for the pages and solving these types of discord:
protected void Page_PreInit(object sender, EventArgs e)
{
Page.Theme = "MyThemeName";
}
As you see in this example, using the theme property of the Page is simple and useful. Now I will solve a repugnance of the different browser CSS rendering by using this technique. I make three types of different CSS files in the three themes of the page and then detect users browser and then apply and fit them to the page.
Now look at the CSS style that is defined just for the Internet Explorer:
body
{
background-color:Fuchsia;
font-family:'Times New Roman';
font-size:medium;
font-weight:normal;
margin:0px;
}
#mainContent
{
padding-top:10px;
padding-left:20px;
padding-bottom:10px;
background-color:Orange;
}
#header
{
float:none;
background-color:Silver;
font-style:normal;
font-size:large;
margin:20px;
padding:10px;
}
#info
{
background-color:#fc4322;
font-size:small;
float:left;
color:Black;
width:500px;
height:100px;
padding:10px;
margin:10px;
}
I will change some of the color values and font sizes and the position of some of the tags to change the face of the page in Internet Explorer. This style sheet is appended to the page when the user request is sent from Internet Explorer browser.
If the browser is Firefox or Chrome, another CSS file will be attached to the page and the view of the page is fully changed.
Thereupon client views your page in different styles with different browsers.
For example, you can see the different body selectors in the CSS files of each theme.
Chrome Style Sheet Example
body
{
background-color:White;
font-family:'Times New Roman';
font-size:medium;
font-weight:normal;
margin:0px;
}
Firefox Style Sheet Example
body
{
background-color:Maroon;
font-family:Tahoma;
font-size:small;
font-weight:bold;
margin:0px;
}
Internet Explorer Style Sheet Example
body
{
background-color:Fuchsia;
font-family:'Times New Roman';
font-size:medium;
font-weight:normal;
margin:0px;
}
You can view the difference between the face of the simple page with single content by using this technique of styling the presentation.
Presentation of Google Chrome Browser
Presentation of Firefox Browser
Presentation of Firefox Browser
Therefore ASP.NET must know the browser types of the user client for changing the style of the page. So I write a snippet code for detecting the browser and then append a fit style to the page and then the user can view requester page nicely.
protected void Page_PreInit(object sender, EventArgs e)
{
if (Request.Browser.Browser.Equals("Firefox"))
Page.Theme = "Firefox";
else if (Request.Browser.Browser.Equals("IE"))
Page.Theme = "IE";
else if (Request.Browser.Browser.Equals("AppleMAC-Safari"))
Page.Theme = "Chrome";
}
NOTE
You must set the Theme property of the Page in the PreInit Event of each page for which you have to change the style.
