Master Pages and CSS StyleSheets

A common problem that often arises from using Master Pages is the confusion about how to reference a CSS StyleSheet from a page within a Master Page. The problem is that the <head> section of the markup is located in the Master Page, so the reference to the StyleSheet cannot be made… seemingly. The trick is to add some code to the Page Load event of the page that need access to the StyleSheet.

This little snippet of code comes in handy during these situations:


Dim link As New HtmlLink
link.Href = "LocationOfMyStyleSheet.css"
link.Attributes.Add(HtmlTextWriterAttribute.Rel.ToString(), "stylesheet")
Page.Header.Controls.Add(link)

About these ads

9 Responses to “Master Pages and CSS StyleSheets”

  1. Gagan Says:

    thanks .

  2. Angus Says:

    Why not place a ContentPlaceHolder within your master page head?

    ie: ***MASTERPAGE***

    Example

    you could then add css to the child page as such:

    **CONTENT PAGE***

    This is also useful for adding Javascript files to content pages etc.

  3. Angus Says:

    Why not place a ContentPlaceHolder within your master page head?

    ie: ***MASTERPAGE***
    |head runat=”server”|
    |title|Example|/title|
    |asp:ContentPlaceHolder id=”head” runat=”server”|
    |/asp:ContentPlaceHolder|
    |/head|

    you could then add css to the child page as such:

    **CONTENT PAGE***
    |asp:Content ContentPlaceHolderID=”head” runat=”server”|
    |link href=”includes/RecordViewer.css” rel=”stylesheet” type=”text/css” /|
    |/asp:Content|

    This is also useful for adding Javascript files to content pages etc.

  4. Yousuf Says:

    thanks a lot

  5. Manchin Says:

    Don’t nest content pages.

    Do it like this:

    Hello!

  6. Manchin Says:

    Like this:
    |asp:Content ID=”HeaderContent” ContentPlaceHolderID=”head” runat=”server”|
    |link href=”css/Main_StyleSheet.css” rel=”Stylesheet”” type=”text/css” /|
    |/asp:Content|

    |asp:Content ID=”BodyContent” ContentPlaceHolderID=”ContentPlaceHolder1″ Runat=”Server”|
    Hello!
    |/asp:Content|

  7. Don Says:

    hi i am starter in this field.so could you pls tel me if the ‘location of stylesheet’ means the name of the stylesheet…
    and in last line ‘link’ means we hv to write just the same word link…

  8. bechildsafe.com Says:

    Unquestionably consider that which you stated. Your favourite justification seemed to be on the web the easiest factor to be mindful of.
    I say to you, I certainly get irked even as folks think about concerns that they just don’t recognize about. You managed to hit the nail upon the highest and also defined out the entire thing with no need side effect , other folks can take a signal. Will likely be back to get more. Thank you

  9. Rosario Says:

    Good article! We will be linking to this particularly great post on our website.
    Keep up the great writing.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: