Web Design that taps into the haromny and vision of your dreams.

Adding StyleSheets to ASP.Net via C#

How to add stylesheets to ASP.Net web pages from C#

By on in Coding

305 words, estimated reading time 2 minutes.

In some situations you may want to add link information to the html header, for example stylesheets or RSS feeds. This can be done by hard coding into the .aspx file but what about dynamically adding links? In this tutorial we will see how to manually add HtmlLinks using C# code behind.

In this short tutorial I am going to show you how to use the HtmlLink class to add a stylesheet to the header of an ASP.Net masterpage. You can also use this in the same way for a standard aspx page.

The first thing to do is create a HtmlLink object.

HtmlLink styleLink = new HtmlLink();

Next I'll add two attributes to the link:

styleLink.Attributes.Add("rel", "stylesheet");
styleLink.Attributes.Add("type", "text/css");

Finally, I'll set the location of the stylesheet to load:

styleLink.Href = "http://mydomain.com/css/mystylesheet.css";

The final step is to add this styleLink to the header. I usually do this in the Page_Load event.

protected void Page_Load(object sender, EventArgs e)
{
  HtmlLink styleLink = new HtmlLink();
  styleLink.Attributes.Add("rel", "stylesheet");
  styleLink.Attributes.Add("type", "text/css");
 
  // Get the stylesheet from DB or build up string
  styleLink.Href = "http://mydomain.com/css/mystylesheet.css"; 
 
  this.Page.Header.Controls.Add(styleLink);
}

When executed this code will send the following HTML to the browser:

<link rel="stylesheet" type="text/css" href="http://mydomain.com/css/mystylesheet.css" />

Meta Tags

You can use a very similar technique to add meta information to the header, for example keywords and description. Instead of using the HtmlLink class, use a HtmlMeta class.

HtmlMeta meta = new HtmlMeta();
meta.Attributes.Add("name", "keywords");
meta.Attributes.Add("content", "these, are, my, html, meta, keywords");
Page.Header.Controls.Add(meta);

When executed this code will send the following HTML to the browser:

<meta name="keywords" content="these, are, my, html, meta, keywords" />

Last updated on: Wednesday 21st June 2017

 

Comments

Have a question or suggestion? Please leave a comment to start the discussion.

 

Leave a Reply

Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Your email address will not be published.