CODEWITHSUNDEEP
cssasp.netwebformsmaster-pages
Vikes
Vikes

Reputation: 33

Failure to implement external css file in .aspx content page in asp.net WebForms application

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;
}

Upvotes: 1

Views: 630

Answers (1)

TylerH
TylerH

Reputation: 21066

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.

Upvotes: 0

Related Questions