1

I am struggling to implement an external CSS file in the content pages of my asp.net WebForms application. The content page thus have a master page (Site.Master) in which I included the following code in the head section:

    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
          <link href="Styles/pokerpsych.css" rel="stylesheet" type="text/css" />
    </asp:ContentPlaceHolder>

The asp:ContentPlaceholder tag thus contains the link to the CSS file that I want to apply to all pages. The styling in this link is thus successfully applied to the content in the body tag of the Site.Master page however the styles specified in this file is not applied to IDs that are specified for content pages. In one of my content pages I have for instance the following code:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="PostHand.aspx.cs" Inherits="PokerPuzzleWebforms.PostHand" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <header>
         <h1>Post your hand here</h1>
    </header>
    <main>
        <label runat="server" for="titleBox" id="titleLabel" >Title</label>
        <input type="text" id="titleBox" name="titleBox" runat="server" />
    </main>
</asp:Content>

I am thus trying to apply styling to the label for the textbox (id="titleLabel") although I have not been successful.

I have validated the CSS file and there seems to be no errors. I have also tried to override the pokerpsych.css with another external CSS file by adding the following code in the content page:

<asp:Content ID="Head" ContentPlaceHolderID="HeadContent" runat="server">
    <link href="Styles/posthandstyle.css" rel="stylesheet" type="text/css" runat="server"/>
</asp:Content>

I also tried embedding a style tag within the asp:Content tag although this was not successful. I am however only able to apply the styles to the id when I make use of inline styles although I would prefer to include an external file to apply the styles.

Below is the CSS file (pokerpsych.css):

body {
}

#test{
    color:red;
}
#titleLabel {
    color:red !important;
    margin-right:100px;
}
3
  • Comment out current CSS link temporarily. Drag CSS file from Solution Explorer to the Master Page. Hit F5 in your browser and see if it works. Commented Dec 29, 2016 at 12:50
  • 1
    Probably caused by dynamic ID handling in webforms. The ID of the textbox in the rendered HTML is likely different from just titleLabel. Check by View source on the rendered page. Easiest workaround might be to create class based CSS and refer to the correct class on the control in the ASPX page. Commented Dec 29, 2016 at 14:19
  • Thank you, seems the problem was the dynamic ID handling. The View Source indicated that the ID was merged with the container "MainContent_titleLabel". Using classes seem to solve this issue Commented Dec 29, 2016 at 17:22

1 Answer 1

0

From user1429080's comment:

This is probably caused by dynamic ID handling in Web Forms. The ID of the textbox in the rendered HTML is likely different from just titleLabel. Check by View source on the rendered page.

The easiest workaround might be to use class-based CSS and refer to the correct class on the control in the ASPX page instead of the IDs.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.