external css for specific div only
Question
I am still a newbie, I have an issue.
I have a website which uses some custom edited mybootstrap.css .
I want to add a page by <?php include 'page.html';?>
For this page.html , I want to use a normal bootstrap.css
Now the issue is when i use external css bootstrap.css to my page.html , it messes the whole page. I want this bootstrap.css only for my page.html and not for whole website.
I tried to search a lot on Google and StackOverflow, there were 2 possible ways to do it:
First, by creating a frameset and the other was
`<div>
<style scoped>
@import "scoped.css";
</style>
enter code here
</div>`
Both are not working effectively. Is there any other way? Like using some jquery/javascript for it?
Thanks in advance.
5 answers
solution1
1 2018-02-06 09:25:40
you need to add this in the html page
<link rel="stylesheet" type="text/css" href="scoped.css">
or like this
<!doctype html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="scoped.css">
</head>
<body>
</body>
</html>
solution2
1 2018-02-06 09:34:56
If I understand the question well, the header/footer of the page is being styled by the CSS you have mentioned. In this case, you could modify your page to contain the header/footer and and iframe . The iframe would point to a page where an empty header/footer is being used and only the content is being shown. The content will be page.html. This way you will be able to show page.html with the new styles without being worried that the design of the other content of the page will be ruined.
solution3
0 2018-02-06 09:21:25
您可以直接链接您的 CSS，例如：
<link rel="stylesheet" type="text/css" href="scoped.css">
solution4
0 2018-02-06 09:27:54
- checked that you haven't use some bootstrap classes on your website eg container, container-fluid, row etc
- add the bootstrap.css only to page.html and not on your main index file..note that if you include page.html in your index file probably through php include, then your website will inherit some css classes from bootstrap
- Just like @hamza suggested, you can copy the css styles you neex from boostrap and add it to mycss.css or better still google the css styles you need for the page.html and add it to your css
solution5
0 2018-02-06 09:55:06
You can try this **jQuery Scoped CSS plugin**
Include this plugin file (minified, ideally) and call $.scoped() on load. If you add style blocks to the page later, you need to rerun the plugin.
Any style blocks with the scoped attribute are processed and limited to only affect their parent's children:
<section>
<style scoped>
p {color:red;}
</style>
<p>This will be red.</p>
</section>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.