Basic Styling (ChartsCSS#47)

* Basic Styling: reverse sections

* Basic Styling: Style with CSS variables

Author: ramiy

src/customization/basic-styling.md

@@ -7,54 +7,6 @@ prev: ../
 
 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 tags - `<caption>`, `<tbody>`, `<tr>`, `<th>` or `<td>`.
@@ -121,7 +73,7 @@ To control the chart width/height ratio, use one of the following selectors.
 
 ```css
 #my-chart .bar tbody {
-  aspect-ratio: none;
+  aspect-ratio: auto;
 }
 
 #my-chart .column tbody {
@@ -140,3 +92,91 @@ To control the chart width/height ratio, use one of the following selectors.
   aspect-ratio: 1 / 1;
 }
 ```
+
+## 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 with CSS Variables
+
+**Charts.css** offers several [custom CSS variables](../development/supported-features/#variables) to style different chart elements.
+
+Use CSS variables on different chart types.
+
+```css
+#my-chart .bar {
+  --color: red;
+  --labels-size: 150px;
+  --labels-align-inline: start;
+  --labels-align-block: center;
+}
+
+#my-chart .column {
+  --primary-axis-color: blue;
+  --primary-axis-width: 3px;
+}
+
+#my-chart .area {
+  --data-axes-color: grey;
+}
+
+#my-chart .line {
+  --line-size: 3px;
+  --color: black;
+  --labels-size: 3rem;
+}
+
+#my-chart .pie {
+  --primary-axis-color: blue;
+}
+
+#my-chart .legend {
+  --legend-border-width: 2px;
+  --legend-border-style: solid;
+  --legend-border-color: brown;
+}
+```