Home/ Questions/Q 8112351
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T02:28:14+00:00

I’m writing a ASP.NET Web Application and I’m running into trouble getting the CSS

  • 0

I’m writing a ASP.NET Web Application and I’m running into trouble getting the CSS styles to be applied. Currently I have a Master Page and one Content Page. My Master page is getting the CSS style applied to it, but the Content page is not. The funny thing is in design view the style is being applied to the Content page but once it is ran the browser doesn’t apply it. I’ve tried internal and external style sheets. Inline does work but I’d like to avoid inline. Here is some sample code of what I have and tried

Master Page: 

<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="~/Styles/MasterStyleSheet.css" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

Content Page:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link rel="stylesheet" type="text/css" href="~/Styles/LoginStyleSheet.css" />
    <!-- <link href='<%= ResolveUrl("~/Styles/LoginStyleSheet.css") %>' rel="stylesheet" type="text/css" /> I tried this as well-->
</asp:Content>

I’ve added the simple css file just so people could see that the syntax is correct:
LoginStyleSheet.css

#usrLabel {
    color:Blue;
    background-color:Aqua;
}

#Label4 {
    background-color:Black;
}

Any help would be greatly appreciated

Update #1

HTML output for header:

<head>
    <title></title>

    <link rel="stylesheet" type="text/css" href="../Styles/MasterStyleSheet.css" />

    <!-- <link href="&lt;%= ResolveUrl(&quot;~/Styles/MasterStyleSheet.css&quot;) %>" rel="stylesheet" type="text/css" /> -->
    <!-- <link rel="stylesheet" type="text/css" href="../Styles/LoginStyleSheet.css" /> -->
    <!-- <link href='/Styles/LoginStyleSheet.css' rel="stylesheet" type="text/css" /> -->
    <!-- <link rel="stylesheet" type="text/css" href="~/Styles/LoginStyleSheet.css" /> -->
    <!-- <link rel="stylesheet" type="text/css" href="../Styles/LoginStyleSheet.css" /> -->
    <!-- <link rel="stylesheet" type="text/css" href="/Styles/LoginStyleSheet.css" /> -->
</head>

A lot of <link> elements are currently commented out but those are all different ways I’ve tried.

Update #2

First I appreciate the many responses. They have all been geared towards figuring out why my external css file won’t work. However, if i try internal css style sheet it still doesn’t work. Only inline css works. Perhaps if we could figure out what was wrong with why internal css styling wont work that would solve the same issue with external css style sheets

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As you have already realised, the following won’t translate into an absolute path, because it is not an asp.net object…

    <link rel="stylesheet" type="text/css" href="~/Styles/LoginStyleSheet.css" />

    Instead, try using this…

    <link rel="stylesheet" type="text/css" href="<%=VirtualPathUtility.ToAbsolute("~/Styles/LoginStyleSheet.css")%>" />

    UPDATE (after updated question)…

    If the HTML sent the browser is as follows, then I believe LoginStyleSheet.css is either in a different location, or has some file permissions that are stopping it being served correctly…

    (I have removed commented out lines, and added the line starting with **… the ** should NOT be included)

    <head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="../Styles/MasterStyleSheet.css" />
  **<link rel="stylesheet" type="text/css" href="../Styles/LoginStyleSheet.css" />
</head>

    ALSO @aRsen49 highlights a possibility in his answer… and that is that the CSS file is loading correctly, but the CSS is incorrect. Have you double checked that the CSS matches as it should (remembering that # denotes an id where as . denotes a class)?

    FURTHER UPDATE

    If @Trisped is correct in his assumption, I think I might have an idea what is going wrong…

    If usrLabel and Label4 are asp objects (such as <asp:Label>), the fact you’re using Masterpages means that the actual id of the controls in the HTML sent to the browser will not be usrLabel and Label4, but in fact they’ll be something like ct100_Content1_usrLabel and ct100_Content1_Label4… so your CSS as you currently have it will not link up correctly.

    So I would recommend you either update your CSS to use the id’s sent to the browser, or (and this would be my preference) you should add CssClss="usrLabel" attributes to each of the objects, and then update your CSS to .usrLabel instead.

    • 0