I am facing an issue with my asp.net web form that has a linked CSS file. The web form is also connected to a master page.
The master page includes header, footer, and main CSS files.
The web form page includes a product-grid CSS file.
While the header, footer, and main CSS files are loading successfully in the web form page, the product-grid CSS file, which is linked inside the web form head tag, is not loading at all.
*I have searched for a solution before posting this question, but none have resolved my problem.*
Internal styling works fine.
Master page head tag
<head runat="server">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Required meta tags -->
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afcdc0c0dbdcdbddcedfef9a819f819f82cdcadbce9e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Bootstrap CSS -->
<!-- Needed CSS files -->
<!-- main CSS -->
<link href="/assets/css/main/main.css" rel="stylesheet" type="text/css">
<!-- Header and Footer CSS file-->
<link href="/assets/css/main/HeadFoot.css" rel="stylesheet" type="text/css">
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<!-- Needed CSS files -->
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<!-- Font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="/assets/images/favicon_red_64x64.png" />
<title>
<asp:ContentPlaceHolder ID="title" runat="server"></asp:ContentPlaceHolder>
</title>
</head>
web form head tag (content placeholder because of master page)
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<!-- products grid -->
<link href="../assets/css/main/products-grid.css" rel="stylesheet" type="text/css" />
</asp:Content>