How to stop CSS to be applied to a part of layout on the samepage

HTML & CSS
1

I have created a SharePoint Page using Wiki page option. - I used the two column option and created the page. Added the html code for accordions using the Js and some css style I did that by using Insert-> Embedded code → added the code in the box and it was added as a webpart and it solved my purpose. - But here is a new problem, I don’t want the CSS to be applied to the other column of the page. How to avoid that.

<script src="..//SiteAssets/jquery-2.0.2.min.js"></script>
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Untitled</title>
<style>
/*** CSS for collapsable headers ***/

/*** Expanded h2 ***/
#DeltaPlaceHolderMain h2:before {
  display: inline-block;
  margin-right: .5em;
  border-radius: 2em;
  padding: 0 .05em .05em ;
  background: black;
  color: #fff;
  cursor: pointer;
  vertical-align:middle;
  font: bold 0.8em/0.8 verdana, sans-serif;
  content: '\2212'; /* math operators minus sign */
}
/*** Collapsed h2 ***/
#DeltaPlaceHolderMain h2.expand:before {
  content: '\2b'; /* basic latin plus sign */
}
</style>

</head><body>

<div id="DeltaPlaceHolderMain">

</div>

</body></html>

Also, I want to change the color of the alternate header to grey, any code for that would really help, thank you. please help

Best Regards Vishnu

2

Unfortunately we do not have anyone here familiar with Sharepoint or Wiki pages so you may be better off asking in a dedicated sharepoint forum.

I can tell you that the C in CSS stands for cascading so you can’t actually stop styles cascading through the document because that’s specifically what CSS was designed for. (Although there are some new CSS properties coming along that may well allow isolated elements on the page.).

If you don’t want the styles from the original page affecting your column then you will need to over-ride any styles that you don’t want.

The styles that you have applied to your own column should not leak into other columns unless you have used the same ids or classes etc.

Sorry not much help I know but I am not familiar with sharepoint pages.:wink:

1 Like
3

Neither I am familliar with Sharepoint, but the code you posted has only one column, if I understand correctly?

How does the code look like when there is two columns?

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.