update docs

Readme.md

@@ -2,9 +2,9 @@
 
 [![npm][npm-image]][npm-url] [![license][license-image]][license-url]
 
-Opinionated [reset stylesheet](https://cssreset.com/what-is-a-css-reset/) that provides a clean styling slate for your project. All spacing (margin & padding) and font-sizing is removed and set to be inherited from its parent.
+Opinionated [reset stylesheet](https://cssreset.com/what-is-a-css-reset/) that provides a clean styling slate for your project.
 
-This approach avoids having to reset styles when creating different styled instances of the same element, it also contributes to the separation of presentation and semantics.
+All spacing (margin & padding) and font-sizing is removed and set to be inherited from its parent. This approach avoids having to reset styles when creating different looking instances of the same element, contributing to the separation of presentation and semantics.
 
 Like [normalize.css](https://github.com/necolas/normalize.css), just what needs reseting is reset to avoid bloat in the browser's style inspector.
 
@@ -33,17 +33,54 @@ body {
 }
 ```
 
+It is discouraged to define styles for raw html tags apart from `body` and `html`, use classes (or any other selectors / system) for styling.
+
+If you need to create styles for tags generated by a CMS or markdown wrap them in a class (e.g. `.type`).
+
+```css
+.type h1 {
+  \* styles *\
+}
+
+.type h2 {
+  \* styles *\
+}
+```
+
 ## Why?
 
-Normalize.css just makes elements consistent between browsers and it does it well, but it does not remove the user agent's assumptions about how things have to look. Destyle.css removes these assumptions and leaves the look to the stylesheet author.
+Normalize.css just makes elements consistent between browsers and it does it well, but it does not remove the user agent's assumptions about how things have to look. Destyle.css removes these assumptions and leaves the look up to the stylesheet author.
 
 As an example it facilitates styling headings differently depending on the context in with they are shown.
 
-An `h1` might need to be bold & large in some context (like at the top of a text page) but might be small and inconspicuous in others (like a settings page in an app).
+An `h1` might need to be bold & large in some context (at the top of a text page) but might be small and inconspicuous in others (on a settings page in an app).
 
 Creating two different styles for `h1` is made easy as only the styles you need to get the desired visual results have to be applied without the need to overwrite default styles while maintaining semantics.
 
-How to create the styles is up to the author. It can be by creating classes, compose style using functional classes, styling inside a react component, etc. In any case the author always gets a clean slate for styling each element and it is up to him/her to reuse the styles or start from scratch for every instance.
+```css
+/* No reseting of the user agent styles necessary,
+ * just take care of making things look how you want to.
+ */
+.main-title {
+  font-size: 3em;
+  margin-bottom: 20px;
+}
+
+.secondary-title {
+  padding: 10px;
+  font-weight: bold;
+}
+```
+
+```html
+<!-- article.html -->
+<h1 class="main-title">Large title</h1>
+
+<!-- profile.html -->
+<h1 class="secondary-title">Small title</h1>
+```
+
+How to create the styles is up to the author, it can be by creating classes, compose style using functional classes, styling inside a react component, etc. In any case the author always gets a clean slate for styling each element and it is up to him/her to reuse the styles or start from scratch for every instance.
 
 ## Rules & Caveats