I'm working on a project that involves using multiple templates, but I've run into issues with conflicting CSS links from different templates. I want to ensure that the CSS link from one template only affects a specific HTML card without impacting the rest of the file .cshtml. Can you provide a solution for this?
Here is my layout.cshtml file:
<head>
<title>POU Education Category Bootstrap Responsive website Template | Home :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="POU Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola web design" />
<script>
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<!-- Custom Theme files -->
<link href="~/home/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<!-- shop css -->
<link href="~/home/css/shop.css" type="text/css" rel="stylesheet" media="all">
<link href="~/home/css/style.css" type="text/css" rel="stylesheet" media="all">
<!-- font-awesome icons -->
<link href="~/home/css/font-awesome.css" rel="stylesheet">
<!-- //Custom Theme files -->
<!-- online-fonts -->
<!-- logo -->
<link href="//fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
<!-- titles -->
<link href="//fonts.googleapis.com/css?family=Merriweather+Sans:300,300i,400,400i,700,700i,800,800i" rel="stylesheet">
<!-- body -->
<link href="//fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
<!-- //online-fonts -->
<link href="//fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600&display=swap" rel="stylesheet">
<link href="//fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap" rel="stylesheet">
<link href="~/css/style-starter.css" type="text/css" rel="stylesheet">
</head>Below is the index.cshtml file code that utilizes the above layout:
<!--end post-->
<div class="w3l-homeblock2 py-5">
<div class="container py-lg-5 py-md-4">
<!-- block -->
<div class="row">
<div class="col-lg-12">
<h3 class="section-title-left mb-4"> Editor's Pick </h3>
<div class="row">
<div class="col-lg-6 col-md-6 item">
<div class="card">
<div class="card-header p-0 position-relative">
<a href="#blog-single.html">
<img class="card-img-bottom d-block radius-image-full"
src="assets/images/image1.jpg" alt="Card image cap">
</a>
</div>
<div class="card-body blog-details">
<span class="label-blue">Beauty</span>
<a href="#blog-single.html" class="blog-desc">The 3 Eyeshadow palettes I own & How to
downsize your stash
</a>
<p>Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis
vitae sit.</p>
<div class="author align-items-center mt-3 mb-1">
<img src="assets/images/a1.jpg" alt="" class="img-fluid rounded-circle" />
<ul class="blog-meta">
<li>
<a href="author.html">Isabella ava</a> </a>
</li>
<li class="meta-item blog-lesson">
<span class="meta-value"> July 13, 2020 </span>. <span
class="meta-value ml-2"><span class="fa fa-clock-o"></span> 1 min</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 mt-md-0 mt-sm-5 mt-4">
<div class="card">
<div class="card-header p-0 position-relative">
<a href="#blog-single.html">
<img class="card-img-bottom d-block radius-image-full"
src="assets/images/image2.jpg" alt="Card image cap">
</a>
</div>
<div class="card-body blog-details">
<span class="label-blue">Fashion</span>
<a href="#blog-single.html" class="blog-desc">2 New outfit formulas to add to your
Capsule Wardrobe
</a>
<p>Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis
vitae sit.</p>
<div class="author align-items-center mt-3 mb-1">
<img src="assets/images/a2.jpg" alt="" class="img-fluid rounded-circle" />
<ul class="blog-meta">
<li>
<a href="author.html">Charlotte mia</a> </a>
</li>
<li class="meta-item blog-lesson">
<span class="meta-value"> July 13, 2020 </span>. <span
class="meta-value ml-2"><span class="fa fa-clock-o"></span> 1 min</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>I am looking for a way to make sure that the CSS path at the bottom of the layout.cshtml file (<link href="~/css/style-starter.css" type="text/css" rel="stylesheet">) only applies to the first card component in the index file.cshtml, while leaving other card components unaffected.