<ul>
<li><a href="http://www.javascriptkit.com" style="--basecolor:#D8E6E7; --accentcolor:black">Home</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/javatutors">JS Tutorials</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
</ul>

<p>The first link has a different default and hover style, set using inliine CSS variables.</p>

<h2>Read Tutorial: <a href="http://www.javascriptkit.com/dhtmltutors/css-variables-tutorial.shtml">Introduction to CSS Variables</a></h2>

:root{
  --basecolor: #eee;
  --accentcolor: purple;
}

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li{
 display: inline-block;
 margin-bottom: 5px;
}

ul li a{
  padding: 10px;
  display: block;
  font-size: 1.2em;
  text-decoration: none;
  font-weight: bold;
  color: black;
  background: var(--basecolor);
  border-radius: 10px;
}

ul li a:hover{
  color: white;
  background: var(--accentcolor);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.