I've been facing some challenges while trying to incorporate an external CSS file into the content pages of my asp.net WebForms application. The content pages have a master page (Site.Master) which includes 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 contains the link to the CSS file intended to be applied to all pages. While the styling from this link is successfully being applied to the content within the body tag of the Site.Master page, it is not being applied to IDs specified for content pages. For example, in one of my content pages, I have 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 attempting to apply styling to the label for the textbox (id="titleLabel"), but haven't had much success.
I have verified that the CSS file has no errors. I also attempted overriding 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 even tried embedding a style tag within the asp:Content tag without success. However, I can apply styles to the id by using inline styles, though I would prefer using an external file for styling purposes.
Below is a snippet from the CSS file (pokerpsych.css):
body {
}
#test{
color:red;
}
#titleLabel {
color:red !important;
margin-right:100px;
}