Cambio hoja de estilos puro Css

Utilizando :target para lograr un cambio de hoja de estilos.

by kseso

HTML

<body id="color">
<div id="huevera">
<h1>Prefiero los huevos:</h1>
<ul>
  <li><a href="#color">Blancos</a></li>
  <li><a href="#huevera">Morenos</a></li>
  <li><a href="#chocolate">No me gustan los huevos</li>  
  <li><a href="#">No es hora de comer</a></li>
</ul>
<div id="chocolate">
<span class="choco">Chocolate</span><span class="choco">Casero</span><span class="choco">Puro</span><span class="choco">Kseso Css</span><br/>
<span class="choco">Chocolate</span><span class="choco">Casero</span><span class="choco">Puro</span><span class="choco">Kseso Css</span><br/>        
<span class="choco">Chocolate</span><span class="choco">Casero</span><span class="choco">Puro</span><span class="choco">Kseso Css</span>
</div>
<div>
    <div class="huevo"></div>
    <div class="huevo"></div>
    <div class="huevo"></div>
</div>
</body>

CSS

* {margin: 0; padding: 0; border: none; position: relative;}
html {
  background: #fff;
  height: 100%;
  min-height: 100%;
}
#huevera:target {
  background: #41B7D8;
  color: #fff;
}
#huevera:target h1 {
  font-family: georgia, serif;
  text-transform: uppercase;
}
#color:target {
  background: #FFE4AC;
  color: red;  
}
#color:target h1 {font-family: monospace;  text-transform: uppercase;}
h1 {text-align: center; font-size: 3em;}
body {
  height: 100%;
  min-height: 100%;
}
.huevo {
   display:block;
   width:126px; /* el 70% de height */
   height:180px;  
   -webkit-border-radius:63px 63px 63px 63px/ 108px 108px 72px 72px; /* bug en Safari*/
   border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
   float: left;
   margin: 20px;
}
#color:target .huevo {
    background-color:#F8F8F8;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.2) inset, -5px -5px 15px rgba(0, 0, 0, 0.1) inset;
}
#huevera:target .huevo {
   background-color:#FFE4AC;
   box-shadow: 0 0 60px rgba(0, 0, 0, 0.2) inset, -5px -5px 15px rgba(0, 0, 0, 0.1) inset;
}
#chocolate {display: none; margin-top: 20px;}

/******* Chocolate by: Taufik *********/
.choco {
    display:inline-block;
    background-color:#54341A;
    text-shadow:0px 1px 0px rgba(255,255,255,0.1);
    text-decoration:none;
    font:normal 20px 'Monotype Corsiva','Book Antiqua',Georgia,Serif;
    color:#170D05;
    width:120px;
    text-align:center;
    margin:0px 0px;
    padding:0px 0px;
    line-height:40px;
    border-top:9px solid #6A4021;
    border-right:10px solid #39210D;
    border-bottom:10px solid #241505;
    border-left:10px solid #402712;
    -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.15),
        0px 1px 2px black;
    -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.15),
        0px 1px 2px black;
    box-shadow:inset 0px 1px 0px rgba(255,255,255,0.15),
        0px 1px 2px black;
}
#chocolate:target ~ div {display: none;}
#chocolate:target {display: block;}
ul {list-style-type: none; margin: 0 3em;}