How to add CSS Programmatically to an ASP.NET Page

I recently wrote an article on How to add a CSS Link programmatically using JavaScript. A user asked me how to do it in an ASP.NET page. It’s quite simple actually using the HtmlLink class which gives you programmatic access to the HTML <link> element.

Start by adding a reference to the System.Web.UI.HtmlControls namespace. Also make sure that your head tag has the runat=”server” attribute

<head runat="server">
    <title>Add CSS Dynamically</title>
</head>

Then add the following code in your code behind.

C#

protected void Page_Init(object sender, EventArgs e)
{
    HtmlLink link = new HtmlLink();
    link.Href = "~CSS/FloatDes.css";
    link.Attributes.Add("rel", "stylesheet");
    link.Attributes.Add("type", "text/css");
    Page.Header.Controls.Add(link);
}

VB.NET

Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
    Dim link As New HtmlLink()
    link.Href = "~CSS/FloatDes.css"
    link.Attributes.Add("rel", "stylesheet")
    link.Attributes.Add("type", "text/css")
    Page.Header.Controls.Add(link)
End Sub

Now run your page and check it’s source. You will see the link to the CSS file added in the head element as shown below:

<head><title>

Add CSS Dynamically

</title><link href="~CSS/FloatDes.css" rel="stylesheet" type="text/css" /></head>

4 comments:

  1. urbanSeptember 19, 2009 at 8:46 AM

    Perfect! Thanks for this nice tip!

    ReplyDelete
  2. IgorJuly 31, 2012 at 2:09 AM

    I went a step over, I wanted a method that makes me impossible to include duplicates, something like ClientScriptManager.RegisterClientScriptInclude().
    The solution is to give an ID to the control added in the Header section.

    if (!String.IsNullOrEmpty(Key))
    if (Page.Header.FindControl(Key) != null) return;

    HtmlLink link = new HtmlLink();
    if (!String.IsNullOrEmpty(Key)) link.ID = Key;
    link.Href = StyleUrl;
    link.Attributes.Add("type", "text/css");
    link.Attributes.Add("rel", "stylesheet");
    Page.Header.Controls.Add(link);

    For the complete article I wrote: http://www.idea-r.it/Blog.aspx?Article=49

    ReplyDelete
  3. Suprotim AgarwalJuly 31, 2012 at 4:14 AM

    Nice! Thanks for sharing your solution here

    ReplyDelete
  4. UnknownJanuary 22, 2015 at 9:34 PM

    Why not define a generic HTML <link> and set the HREF programmatically?

    For example, in the source page <head>, add, "<link id="cssStyle" runat="server" rel="stylesheet" type="text/css" />". Then, in Page_Load set the Href property of cssStyle:
    cssStyle.Href = "path/to/Styles.css";

    Seems a bit cleaner and you have the control over placing the <link> in the desired order.

    ReplyDelete