Customization: Basic chart styling (ChartsCSS#39)

* Update config.js

* Update 3d-effects.md

* Create basic-styling.md

* Update README.md

* Update usage.md

Author: ramiy

src/.vuepress/config.js

@@ -123,6 +123,7 @@ module.exports = {
         collapsable: false,
         sidebarDepth: -1,
         children: [
+          '/customization/basic-styling',
           '/customization/3d-effects',
           '/customization/motion-effects',
           '/customization/animations',

src/customization/3d-effects.md

@@ -1,6 +1,5 @@
 ---
 permalink: /customization/3d-effects/
-prev: ../
 ---
 
 # 3D Effects

src/customization/README.md

@@ -1,6 +1,6 @@
 ---
 prev: ../charts/mixed
-next: ./3d-effects
+next: ./basic-styling
 ---
 
 # Customization
@@ -9,7 +9,7 @@ One of the key features in **Charts.css** is the ability to **_customize visibil
 
 ## Custom Styling 
 
-To add custom CSS simply add an `id` attribute to the `<table>` tag:
+To add custom CSS simply add an `id` attribute to the `<table>` element:
 
 ```html
 <table id="my-chart" class="charts-css bar|column|area|line ...">
@@ -47,12 +47,12 @@ We recommend adding the chart type to your selector. This way the custom style w
 
 ```css
 /* Customize only bar charts */
-#my-chart.bar {
+#my-chart > table.bar {
   ...
 }
 
-/* Customize only pie charts */
-#my-chart.pie {
+/* Customize only column charts */
+#my-chart > table.column {
   ...
 }
 ```
@@ -61,10 +61,11 @@ This is important because each chart type has its own structure and layout. You
 
 ## Basic Examples
 
-There are many ways to customize the framework. We prepared some basic examples to get you started, covering three topics.
+There are many ways to customize the framework. We prepared some basic examples to get you started, covering the following topics.
 
+* [Basic Styling](/customization/basic-styling/)
 * [3D Effects](/customization/3d-effects/)
 * [Motion Effects](/customization/motion-effects/)
 * [Animations](/customization/animations/)
 
-have a beautiful design? Create a codepen and share with the community!
+Have a beautiful design? Create a codepen and share with the community!

src/customization/basic-styling.md

@@ -0,0 +1,105 @@
+---
+permalink: /customization/basic-styling/
+prev: ../
+---
+
+# Basic Styling
+
+Charts are styled using regular CSS rules. You can apply custom styles on any HTML element or [chart layer](../docs/anatomy/) inside the `<table>` element.
+
+## Style Specific Elements
+
+To style specific elements, use any method supported by CSS.
+
+### CSS Selectors
+
+Use CSS `:nth-of-type()` pseudo-class to match the nth data CSS based on the position among siblings.
+
+```html
+<tbody>
+  <tr>
+    <td> 20 </td>
+  </tr>
+  <tr>
+    <td> 40 </td>
+  </tr>
+  <tr>
+    <td> 60 </td>
+  </tr>
+<tbody>
+```
+
+```css
+#my-chart tbody tr:nth-of-type(2) td {
+  font-weight: bold;
+}
+```
+
+### CSS Classes
+
+Use custom classes on the element you want to style, and apply custom styles only on that CSS class.
+
+```html
+<tr>
+  <td> 20 </td>
+  <td> 40 </td>
+  <td> 60 </td>
+  <td> 80 </td>
+  <td class="highlight"> 100 </td>
+</tr>
+```
+
+```css
+.highlight {
+  font-weight: bold;
+}
+```
+
+## Style Chart Elements
+
+To style specific chart elements or layers, use one of the HTML tag - `<caption>`, `<tbody>`, `<tr>`, `<th>` or `<td>`.
+
+### Colors
+
+To control the color of different elements, simply use element selector.
+
+```css
+/* Heading */
+#my-chart caption {
+  color: red;
+}
+
+/* Labels */
+#my-chart tbody th {
+  color: green;
+}
+
+/* Data */
+#my-chart tbody td {
+  color: blue;
+}
+```
+
+### Backgrounds
+
+To control the backgrounds of different elements, use one of the following selectors.
+
+```css
+/* Heading */
+#my-chart caption {
+  background-color: hotpink;
+  color: white;
+}
+
+/* Chart */
+#my-chart tbody {
+  background-color: beige;
+  color: black;
+}
+
+/* Labels */
+#my-chart tbody th {
+  background-color: deepskyblue;
+  color: blue;
+}
+```

src/docs/usage.md

@@ -174,7 +174,7 @@ This is an expected behaviour. Search engines and screen readers should consume
 
 ## Charts.css Utility Classes
 
-To transform the HTML table to a chart, the framework offers several [chart types](/charts/) and [components](/components/). To apply any of them, simple add the relevant CSS class to the table.
+To transform the HTML table to a chart, the framework offers several [chart types](/charts/) and [components](/components/). To apply any of them, simply add the relevant CSS class to the table.
 
 ### General Class
 
@@ -218,9 +218,9 @@ If the class becomes longer then expected and unreadable, use the [class groupin
 
 The biggest advantage this framework has to offer is the ability to [customize](/customization/) visibility using CSS. Select any HTML element inside the `<table>` and add your own CSS rules.
 
-Use either an `id` or a `class` for your custom styles. In any case, you need to know basic concepts like CSS specificity, and know when one rule overrides the other.
+Use either an `id` or a `class` attribute for your custom styles. In any case, you need to know basic concepts like CSS specificity, and know when one rule overrides the other.
 
-The `id` can be applied to the `<table>` element:
+The `id` attribute can be applied to the `<table>` element:
 
 ```html{1}
 <table class="charts-css bar ..." id="my-chart">
@@ -234,7 +234,7 @@ The `id` can be applied to the `<table>` element:
 }
 ```
 
-Or to the wrapper element:
+Or add the `id` attribute to the wrapper element:
 
 ```html{1}
 <div id="my-chart">
@@ -247,9 +247,9 @@ Or to the wrapper element:
 ```
 
 ```css
-#my-chart .bar {
+#my-chart > .bar {
   ...
 }
 ```
 
-To demonstrate how easy it is to add custom styling, check out our basic examples for creating [3D effects](/customization/3d-effects/), [motion effects](/customization/motion-effects/) and [animations](/customization/animations/). It's amazing what you can do with a few lines of CSS.
+To demonstrate how easy it is to add custom styling, check out our examples for applying [basic styles](/customization/basic-styling/), [3D effects](/customization/3d-effects/), [motion effects](/customization/motion-effects/) and [animations](/customization/animations/). It's amazing what you can do with a few lines of CSS.