<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.