1

I have one simple question that I couldn't find a definitive answer for as of yet. I want to change the styling of a website that already has extensive CSS applied. I cannot remove or edit these existing files, only add my own. Is there a way to override all existing CSS styles, or even remove them, through a new file? Or is the only solution to override each style individually, by using more specific selectors, the !important keyword, and so on?

I am very new to web design, so I hope you'll forgive this (maybe very simple) question.

RalphBear
  • 75
  • 1
  • 12
  • 1
    I don't think you can do that easily with css. There are some [javascript](https://stackoverflow.com/questions/9252839/simplest-way-to-remove-all-the-styles-in-a-page) solutions though. Is that an option for you? – Mark Baijens Oct 31 '21 at 12:14
  • That's what I thought, even though I hoped there would be a simple solution. Sadly, I can't use JavaScript in my situation, but thank you for your answer. – RalphBear Oct 31 '21 at 12:15
  • Use JS... you'll remove the majority of your headache – ViaTech Oct 31 '21 at 12:21
  • @ViaTech While I appreciate the answer and attempt to help, it's like I said: That's not what I'm asking for, because I cannot do that. All I can do is add a CSS file. – RalphBear Oct 31 '21 at 12:34
  • @RalphBear Then your only solution is to place your CSS below the CSS you want to override...CSS that is rendered closest above the element is used so if you have a `.my_color{color:blue}` defined in `third_party.css` you can place a `main.css` beneath that with `.my_color{color: green}` and any element with that class would end up having green text...does that work?... you just have to override the classes you wish...this is a lot how companies like MDBoostrap do their extra design (well with extra JS) – ViaTech Oct 31 '21 at 22:51

1 Answers1

1

yes important can override it but there are specificity overriding also. Example

<div class="main">
  <div class="test-wrapper">
   <div class="box s-1 h-1">

   </div>
  </div>
</div>


.main .test-wrapper .box{}

if I want to override this

increase the specificity

.main .test-wrapper .box.s-1{}

https://www.w3schools.com/css/css_selectors.asp

Prinju Koshy Vaidyan
  • 485
  • 3
  • 9