I’m trying to add a different style.css file for a specific block in html, so basically using two style.css in the same html and this specific block will only get its rules from the style.css that be gonna be assigned to?
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Askbootstrap">
<meta name="author" content="Askbootstrap">
<link rel="icon" type="image/png" href=" {% static 'img/fav.png' %} ">
<title>Swiggiweb - Online Food Ordering Website Template</title>
<!-- Slick Slider -->
<link rel="stylesheet" type="text/css" href=" {% static 'vendor/slick/slick.min.css' %} " />
<link rel="stylesheet" type="text/css" href=" {% static 'vendor/slick/slick-theme.min.css' %} " />
<!-- Feather Icon-->
<link href=" {% static 'vendor/icons/feather.css' %} " rel="stylesheet" type="text/css">
<!-- Bootstrap core CSS -->
<link href=" {% static 'vendor/bootstrap/css/bootstrap.min.css' %} " rel="stylesheet">
<!-- Custom styles for this template -->
<link href=" {% static 'css/style.css' %} " rel="stylesheet">
<!-- Sidebar CSS -->
<link href=" {% static 'vendor/sidebar/demo.css' %} " rel="stylesheet">
<!-- Stylesheet -->
<link rel="stylesheet" href=" {% static 'assets/css/animate.min.css' %} ">
<link rel="stylesheet" href=" {% static 'assets/css/magnific.min.css' %} ">
<link rel="stylesheet" href=" {% static 'assets/css/jquery-ui.min.css' %} ">
<link rel="stylesheet" href=" {% static 'assets/css/nice-select.min.css' %} ">
<link rel="stylesheet" href=" {% static 'assets/css/owl.min.css' %} ">
<link rel="stylesheet" href=" {% static 'assets/css/slick-slide.min.css' %} ">
<link rel="stylesheet" href=" {% static 'assets/css/fontawesome.min.css' %} ">
<link rel="stylesheet" href=" {% static 'assets/css/remixicon/remixicon.css' %} ">
<link rel="stylesheet" href=" {% static 'assets/css/responsive.css' %} ">
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800&family=Bebas+Neue&family=Satisfy&family=Quattrocento:wght@400;700&display=swap" rel="stylesheet">
</head>this the head, as you can see there is already a style css file there, thisis the html block that need a diffrenet style.css file
<section class="product-area pd-bottom-90">
<div class="container"> ............
</section>
when i try to add this line to refer to the other style.css
<link rel="stylesheet" href=" {% static 'assets/css/style.css' %} ">
the page break and the layout change