Javascript/CSS: normalize all element stylings on a page?

Question

What I need is a way to normalize all styles applied to elements on a page. For example, all the font should be exactly same, anchors should be removed and just the text remaining (or href), font colors should be black, font type should be exactly same.

What shouldn't be changed is the relative positions of elements so that the original structure is retained but not the decorative stylings with fonts, colors, stylings etc.

The reason for this is to reduce the amount of noise. Essentially what I'm trying to do is produce a "grayscale" version of the web where many different sites have no "colors" or decorative features or variations in how the text content in elements are displayed, apart from the positioning of elements.

I've found a normalize or reset css file online and executing it like so by injecting it but it doesn't seem to do what I expected above (I'm actually not sure what the css file actually normalizes).

var link = document.createElement("link");
link.href = "http://necolas.github.io/normalize.css/2.1.3/normalize.css";
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);

Answer 1

A CSS normalizer, like normalize.css, "normalizes" styles across browsers, making the default styles across browsers more or less the same. For instance, if the default style of <a> in Firefox is colored green, but Chrome has it red, a normalize would style it to one color, like say blue. That way, both browsers start with blue.

A CSS reset, like Meyer's CSS reset, on the other hand strips most, if not all, styles from the element. For instance, an <a> would normally be blue and have an underline. A reset will strip that underline and color the link black. <h1> - <h6> normally have a size heirarchy. A reset will size them all the same, leaving you to provide their sizes.

---

I suggest you use normalize.css, and then add in your own styles after it that further strip down what styles that need stripping down.

You can also do it the other way and use a reset and then style what needs styling, but that would be more CSS than the previous approach. That's why normalize was made in the first place.

---

As @charlietfl stated in the comment, you could be doing something like a "Reader mode" script there. Normalize and reset stylesheets won't help you here anymore. Rolling your own stylesheet with very specific styling would be a better approach.

Answer 2

Try using Eric Meyer's reset stylesheet (read more: http://meyerweb.com/eric/tools/css/reset/) It goes beyond normalize.css, by actually resetting all font sizes, fonts families, paddings, margins...