Make elements ignore all styles from a page - css

Question

Basically I am creating a script that inserts elements in a page. The problem is that most of the time the css on the page breaks the layout or colors of my element.
I have tried using the css property all to prevent that from happening
* {
all: unset
}
But there still some stuff getting styled, buttons and links on hover for example.
Is there a way to remove all the external styling from my elements?
I am also using React with styled components if that makes any difference.

Answer 1

Is there a way to remove all the external styling from my elements?
You can’t ignore existing styling, but you can override it by using a selector with high specificity. The most specific selector you can have is an ID selector. The reason your * rule is not helping is because it has low specificity.
p {
font-family: serif;
font-size: 12px;
color: blue;
padding: 1em;
background: lime;
border-radius: 1em;
}
#no-styling {
font-family: unset;
font-size: unset;
color: unset;
padding: unset;
background: unset;
border-radius: unset;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus leo vitae justo tempor, id porttitor ex condimentum. Nunc mauris nisi, aliquet a mollis in, sollicitudin vel ligula. Nam eget tortor sed velit feugiat molestie. Proin sollicitudin elit quam, nec elementum mi commodo ut. Phasellus eget aliquam neque. Ut quis odio sed felis condimentum vulputate et at augue. Cras iaculis eros a elementum eleifend. Suspendisse potenti. Cras et gravida nisl. Proin rhoncus, orci non tincidunt dapibus, augue sem suscipit risus, eget posuere ipsum erat non ex. Aenean quis bibendum lectus. In hac habitasse platea dictumst.
</p>
<p id="no-styling">
Vivamus hendrerit congue gravida. Cras in dignissim nibh. Aenean ornare nisi quis orci ornare, sit amet maximus lorem pellentesque. Nullam at enim rhoncus, volutpat ex egestas, ultrices augue. Phasellus vulputate consectetur orci a fermentum. Pellentesque in justo ante. Suspendisse potenti. Proin congue egestas metus, at interdum risus dignissim id. In dictum massa eu lacus finibus ultrices. Nulla maximus est nec purus sollicitudin efficitur.
</p>
<p>
Pellentesque diam orci, sollicitudin quis sollicitudin ac, commodo sit amet erat. Cras nec nibh vel quam cursus vestibulum ut nec tortor. Pellentesque at neque in mauris mollis bibendum. Maecenas condimentum pretium arcu ut eleifend. Sed tempus elementum nisl ac vehicula. Aenean id mauris eget lorem eleifend volutpat vitae sit amet libero. Morbi vestibulum nulla ante. Vivamus commodo consequat orci eu consequat. Mauris nisl sem, tempor id magna fermentum, tempus gravida eros. Sed imperdiet, quam vitae bibendum convallis, purus nisi rhoncus quam, ullamcorper ultricies lorem quam id nunc. Sed quis fermentum lorem. Sed eleifend condimentum efficitur. Maecenas id mauris ligula. Nunc quis lectus sit amet arcu imperdiet congue.
</p>
<p>
Nam scelerisque enim ut magna condimentum blandit. Curabitur dolor urna, convallis vitae cursus sed, aliquet non nisi. Vestibulum orci enim, venenatis vel dapibus in, hendrerit a odio. Curabitur et tristique risus, a pulvinar sem. Donec vel sapien nec sem pellentesque bibendum sed sed libero. Aliquam suscipit, neque vitae vestibulum luctus, augue magna molestie tortor, vel fringilla quam felis in mi. Phasellus cursus, felis in pretium cursus, massa elit sagittis ligula, id blandit nisl sem id leo. Aenean vitae dui feugiat dui vehicula rhoncus in lacinia urna. Etiam id justo sapien. Aenean quis lacus sed risus vehicula aliquam. Aliquam in lacus id velit ultricies rutrum a id lorem. Donec tristique vehicula convallis. In accumsan vitae nibh id laoreet. In sit amet leo quis lorem suscipit molestie non vitae ligula. Donec massa diam, blandit sit amet tempor faucibus, tincidunt molestie lorem. Phasellus sagittis convallis congue.
</p>
<p>
Sed sodales tincidunt condimentum. Aenean volutpat hendrerit dolor, eget auctor felis efficitur ac. Aenean quis dignissim orci, ut ullamcorper nibh. Vestibulum ullamcorper ac quam rhoncus commodo. Nullam pellentesque ipsum arcu, quis pellentesque est tincidunt vel. Nunc ornare quam eget dapibus placerat. Vivamus eget lectus in eros consectetur blandit. Donec porta ante lectus. Suspendisse a euismod arcu. Nulla sit amet laoreet nisl. Fusce mi diam, tempor et ante eget, mattis ullamcorper libero.
</p>