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.

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>

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

4 comments:

urban said...: Perfect! Thanks for this nice tip!; September 19, 2009 at 8:46 AM
Igor said...: 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; July 31, 2012 at 2:09 AM
Suprotim Agarwal said...: Nice! Thanks for sharing your solution here; July 31, 2012 at 4:14 AM
Unknown said...: 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.; January 22, 2015 at 9:34 PM