「CSSだけで、htmlに記述されているアトリビュートの値をトグル」の（２）です。cssの解説用アイテムを意識して、スタイルの変化を分かりやすくしました。

次のcheckboxのどれかにチェックを入れると、そのcheckboxのidとアトリビュート（data-value）による指定を、「:checked 疑似クラス」と間接セレクタ「~」を使って、親要素が同じ兄弟要素であるdiv要素（class名「text」、 グレーのボーダーのボックス）に対して適用します。チェックを外すと元に戻ります。

font-sizeは2つあり、2つ同時にチェックを入れると、大きい方が優先されます。

サンプルのhtmlソース

<div class="wrapper">
    <h3>スタイル変更checkbox</h3>
    <input type=checkbox id="background" data-value="#dfd">
    <input type=checkbox id="color" data-value="#222">
    <input type=checkbox id="font-family" data-value="sans-serif">
    <input type=checkbox id="font-size" data-value="15px">
    <input type=checkbox id="font-size2" data-value="18px">
    <input type=checkbox id="line-height" data-value="1.6">
    <input type=checkbox id="letter-spacing" data-value="0.1em">
    <input type=checkbox id="padding" data-value="10px">
    <div class="text">［ダミーテキスト］親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。<br>（青空文庫より）
    </div>
</div> 

サンプルのCSSソース

div.wrapper {
	width:800px;
	margin:20px auto;
	font-size:14px;
	padding:15px;
	}
div.text {
	width:100%;
	margin:25px auto;
	font-family: serif;
	background-color: #e7e7e7;
	font-size:12px;
	line-height:1.2;
	color: #666;
	padding: 5px;
	border:1px solid #aaa;
	}
input[type=checkbox] {
	margin-left: 2em;
	display: block;
	font-size:16px;
	line-height:16px;
	margin-bottom:8px;
	}
input[type=checkbox]:after {
	content: attr(id) ": " attr(data-value) ";";
	font-family: monospace;
	color: #333;
	display: block;
	position: relative;
	width: 25em;
	left: 1.5em;
	top:-2px;
	}
input[type=checkbox]#background:checked ~ div.text {background:#dfd;}
input[type=checkbox]#color:checked ~ div.text {color:#222;}
input[type=checkbox]#font-family:checked ~ div.text {font-family:sans-serif;}
input[type=checkbox]#font-size:checked ~ div.text {font-size:15px;}
input[type=checkbox]#font-size2:checked ~ div.text {font-size:18px;}
input[type=checkbox]#line-height:checked ~ div.text {line-height:1.6;}
input[type=checkbox]#letter-spacing:checked ~ div.text {letter-spacing:0.1em;}
input[type=checkbox]#padding:checked ~ div.text {padding:10px;}