Search code examples
htmlcssstylesheet

CSS priority to be changed in one div tag


I am trying to display two kinds of styles in one webpage. I have a.css for the first style and b.css for the second style. The order is b overrides a. The problem is I want the css priority to be reversed in a particular div tag. Is this possible?


Solution

  • There are very few cases where you need to have 2 different CSS files to do the same thing. However, there are many methods that can fix this, one of which is just creating an class/ID of its own in what ever CSS file you want to override with and then attach it to the HTML Element.

    If that doesn't work, my next suggestion would be is to try inline styling.

    <div id="blabla" style="whatyouwantforthisinparticular">
    

    You can't just "override" another script through HTML. Code works in a linear format. Once it sees a new line of code referring to that, it will take precedence based on what you did with it. For example, in CSS, you can have 2 different body stylings, but the top one's attributes will only be used unless the second has something new to add. For example:

    body{ background-color:black; width: 500px;
    }
    body{ background-color:white; height: 300px;
    }
    

    In this example, background-color: black will changed to "white" and then it will add 500px to the height on top of the width of the previous styling. However, if you must have black, then adding !important will make it take precedence over white.