use a second style.css file for a specific html block-CodePudding

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 >

    <div > ............


        
</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

CodePudding user response：

You cant import css-files for specific parts of the html-document. If you want the css to only affect element within the "product-area" class you must change your css-selectors from

#x {
    ...
}

.product-area #x {
    ...
}

You have to do this for every css rule.

CodePudding user response：

The styles are applied in the order that they are linked in the HTML document. So, in the above code, all the rules from 'css/style.css' would be applied first, then the rules from 'assets/css/style.css' will be applied. This can cause similar rules to overwrite the previously linked files and change your layout. Try to optimize a single style sheet as much as you can by using more specific rules. By indicating one or more elements before the element you're selecting, the rule becomes more specific and gets higher priority. Also, you can overwrite all the rules with inline styles defined directly on individual elements. (not recommended unless you have to.)