CSS vars

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>

  <h2>HTML Table</h2>
  <table>
    <caption><strong>Monthly savings</strong></caption>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </table>

</div>

CSS

:root {

  --primary-color: #CCCCCC;

  --secondary-color: #EEEEEE;

  --light-primary-color: #CCCCCC;

  --light-secondary-color: #EEEEEE;


  --text-color: #454545;
  --text-font: "serif, san-serif";




  --border-color: #CCCCCC;
  --background-color: #EEEEEE;
  --body-background-color: #F9F9F9;

}


html,
body {
  background-color: var(--body-background-color);
  margin: 0px;
  padding: 0px;
  color: var(--text-color);
}

table {
  width: 100%;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid var(--border-color);
  text-align: left;
  padding: 8px !important;
}

caption {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  text-align: center;
  padding: 8px;
  margin-bottom: -1px;
}


tr:nth-child(even) {
  background-color: #dddddd;
}


tr:hover {
  background-color: var(--secondary-color);
}