how to let CMS make use of my css files instead of its own css?

Question

(like how override cms' css file like using classes under bootstrap instead of main.css)

..

I having a problem with my website which i made by developing only front end using HTML& CSS. (website is in .HTML).

I decided to use the website under a CMS so that it can be more secured and efficient and i chose fuelCMS1.3.1 under CI.

But i faced a problem when pasting my code into the CMS, my website itself has a css file called 'main.css'..while the fuelCMS itself uses its own 'main.css'!

when it came to pasting code of a dropdown menu from bootstrap, my website under CMS, dropdown menu is not working!

I went to inspect element to see my .HTML website, and it shows that its making FULL use of bootstrap.min.css & few main.css.

but in CMS, when checking inspect elemtn, i found that HALF of the dropdown menu css is using 'main.css' instead of boot strap!

how is possible that 'main.css' in fuel cms is being used instead of my bootstrap link?

i mean, i understand that 'main.css' in fuelCMS is having same classes as in bootstrap, so it is overriding them..how do i solve this and force fuel cms to use classes from my bootstrap link ONLY?

im also facing the same problem with 'body', becuase when i check the inspect element for the 'body' in css, in my HTML website its only used once, But when i check inspect element is FuelCMS, its being surprisingly being used more frequently.

body tag is used in several css files

(as if fuel cms has its own css identification and classes for 'body' instead of making use of my own 'body' tag for local HTML files..same goes for the main.css, fuelcms is identifying my site css tags using its own css files rather than my ones (its overriding them)..not to mention missing classes from my own css files being ignored)

its like my css are clashing with css of the cms, where the cms is overriding my ones.

hope i was able to explain well.

im quite new with front end developing, so I'm still managing and learning trying to track the problem and solve it.

Any suggestions? Thanks in advance.

Answer 1

The main.css is placed under assets folder.
Just remove the main.css and use yours instead.

Or you can use custom.css to override the main.css.
Just include the custom.css in your layout.