Click here to Skip to main content
15,867,686 members
Articles / Web Development / CSS
Tip/Trick

Adding Styles Dynamically to ASP.NET Page Header

Rate me:
Please Sign up or sign in to vote.
4.75/5 (3 votes)
15 Jan 2013CPOL1 min read 76.1K   13   6
This tip describes how to add the dynamic style to ASP.NET page header

Introduction

Recently, when I was working on the ASP.NET web site, I wanted to modify the page styles dynamically. I Googled and found that there are various techniques out there for this. In this tip, I wish to share those techniques with you.

Using the Code

Following are some of the techniques out there to accomplish this.

1. By using Page.header.Controls.Add()

Page.Header property gets the document header of the page if the head element is defined with “runat=server” tag in the page declaration.The Header property gets a reference to an HtmlHead object that you can use to set document header information for the page. The HtmlHead allows you to add information such as style sheets, style rules, a title, and metadata to the head element.

You can read more about Page.Header property here.

By using a literal control, you can include the CSS file or even a style set.

C#
Literal cssFile = new Literal()
{
    Text = @"<link href=""" + Page.ResolveUrl(styleFilePath) + 
	@""" type=""text/css"" rel=""stylesheet""/>"
};
Page.Header.Controls.Add(cssFile);  
C#
Page.Header.Controls.Add(
new LiteralControl(
@"<style type='text/css'>
        .myCssClass
        {
background: black;
border: 1px solid;
        }
</style>
    "
)); 

Or HtmlGenericControl can use to add the styles file:

C#
//// Insert css file to header
HtmlGenericControl oCSS = oCSS = newHtmlGenericControl();
oCSS.TagName = "link";
oCSS.Attributes.Add("href", "css/mystyle.css");
oCSS.Attributes.Add("rel", "stylesheet");
oCSS.Attributes.Add("type", "text/css");
this.Page.Header.Controls.Add(oCSS);

2. Page.Header.Stylesheet

A more elegant technique is the use of the Page.Header.Stylesheet. Instead of using the string to defend styles (like above with Literal), you can use the style properties to create this.

C#
//// Create dynamic style rule which applies to the CSS class selector (".MyCssClass")
Style dynamicClassStyle = new Style();
dynamicClassStyle.BorderStyle = BorderStyle.Solid;
dynamicClassStyle.BorderColor = System.Drawing.Color.Black;
dynamicClassStyle.BorderWidth = new Unit(1);
dynamicClassStyle.BackColor = System.Drawing.Color.White;
Page.Header.StyleSheet.CreateStyleRule(dynamicClassStyle, null, ".MyCssClass"); 
C#
 //// Create dynamic style rule which applies to type selector ("DIV")
Style dynamicTypeStyle = new Style();
dynamicTypeStyle.BorderStyle = BorderStyle.Solid;
dynamicTypeStyle.BorderColor = System.Drawing.Color.Black;
dynamicTypeStyle.BorderWidth = new Unit(1);
dynamicTypeStyle.BackColor = System.Drawing.Color.White;
Page.Header.StyleSheet.CreateStyleRule(dynamicTypeStyle, null, "DIV"); 

For more information, please refer to this link.

With whatever technique you follow, please remember the following hints as well,

Adding styles programmatically using the methods of the IStyleSheet interface during asynchronous postbacks is not supported. When you add AJAX capabilities to a Web page, asynchronous postbacks update regions of the page without updating the whole page.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead Eyepax IT Consulting (Pvt) Ltd.
Sri Lanka Sri Lanka
Having more than 9 year hands-on industry experience in software development
Responsible for designing, implementing and managing complex software systems with stringent up-time requirement.

Visit my blog

Comments and Discussions

 
QuestionMore simple way Pin
Nasenbaaer2-Jun-15 4:25
Nasenbaaer2-Jun-15 4:25 
QuestionIf (Page.Header is null), how to include javascript code into? Pin
Andre Mesquita31-Oct-14 4:46
Andre Mesquita31-Oct-14 4:46 
If (Page.Header is null), how to include javascript code into?

I have a code at OnPageLoad:

StringBuilder x = new StringBuilder()
x.AppendLine("var x;");

I tryied:

C#
Page.Header.Controls.Add(new LiteralControl(x.ToString()));


and

C#
Master.Page.Header.Controls.Add(new LiteralControl(x.ToString()));


but occurs error because:

this.Page.Header is null
Master.Page.Header is null

How to include this string at Header?

AnswerRe: If (Page.Header is null), how to include javascript code into? Pin
Austin Mullins18-Mar-15 11:59
Austin Mullins18-Mar-15 11:59 
GeneralRe: If (Page.Header is null), how to include javascript code into? Pin
Tharaka MTR30-Mar-15 4:07
professionalTharaka MTR30-Mar-15 4:07 
GeneralMy vote of 5 Pin
dgDavidGreene17-Jan-13 7:27
dgDavidGreene17-Jan-13 7:27 
GeneralRe: My vote of 5 Pin
Tharaka MTR17-Jan-13 7:41
professionalTharaka MTR17-Jan-13 7:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.