I don't want css to apply to inner folder

firstnamelastname · Apr 24, 2020

let's say I have a wordpress site in root
in root I create a folder /independent_website

to that folder, I upload html template

I want that independent site to be its own independent website. meaning, it should not be affected by the main website in any way. So for example, let's say the main wordpress site has a css class = "big" that makes the font 30px
the html template also has a css class = "big" but for the html template, the font needs to be 20px

How do I do that? How do I make sure that the css of the root website does not affect the inner folder website?

MisterXYZ · Apr 24, 2020

Either do not load main css in folder html template.

Or if you load main css, overwrite big class font property

Gogol · Apr 24, 2020

have a class in the body.. e.g. <body class="home"> and <body class="someotherpage">.

Then you can target two pages separately, e.g.
.home .big{
//some rule
}

and
.someotherpage .big{
//some rule
}

You can now even target the two elements together for common styles..

e.g.
.big {
// some common style
}

greydingo · May 16, 2020

All the above mentioned solutions would work.

However the "cleanest" and "correct" approach, is to not load css that you're not using, as MisterXYZ said.

You said you want to create an independent website. So why load one sites css on another?

I don't want css to apply to inner folder

firstnamelastname

Regular Member

MisterXYZ

Elite Member

Gogol

Administrator

greydingo

Junior Member

Main Menu

Marketplace

Making Money

BlackHat World