一部のブラウザで、ユーザーがスタイルシートを切り替えられます
このページは、一部のブラウザ（IE, Firefox）でユーザがスタイルシートを選択する事ができます。
ブラウザの「メニューバー」の「表示」→「スタイルシート（スタイル）」で、「test1」「test2」を切り替えてみてください。
セレクタでの切り替え
ブラウザの「メニューバー」でスタイルを切り替えられないかたのために。
JavaScriptによるスタイルシートの切り替え：
link要素で、外部CSS読み込み時に「title属性」を付ける
このページの外部CSSは、下記のように書いています。
<head>
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/style-a.css" title="test1">
<link rel="stylesheet" href="css/style-b.css" title="test2">
<link rel="stylesheet" href="css/style-c.css" title="test2">
</head>
「default.css」は、全体のレイアウトを整え、<body>要素の背景を none（なし）にしています。
「style-a.css」は、<body>要素の背景のみブルーに。そして「title属性」で、「test1」としています。
「title属性」で「test2」としたファイルが2つあります。
後で記述した、異なるtitle名のグループは、初回には適用されない
ページを読み込んだときは、「default.css」（title属性がない）と「style-a.css」（最初の title「test1」）のみが適用されます。
この後に記述した異なる title名のグループの CSSファイル2つは、初回には適用されません。（これはどのブラウザでも同じ現象です）
ユーザーがメニューバーで「test2」を選択すると、このタイトルが付いた「style-b.css」と「style-c.css」が使われます。
このとき最初に読み込んだ「default.css」「style-a.css」は無効（適用されない）になります。
「style-b.css」は「default.css」と同じ内容、「style-c.css」は <body>の背景色をピンクにし、<section>要素にグレーの border を付けました。
このページのCSSを見る
CSS切り替えのセレクトメニューのソースコード
おまけです。
このページの CSS切り替えセレクトメニューのソースコードです。
<head>部分で、CSSの2番目（背景色をブルーにしたCSS）の読み込みの <link>要素に id を付けています。
同じく <head>部分に Javascript を下記のように書いています。
<head>
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/style-a.css" title="test1" id="switch">
<link rel="stylesheet" href="css/style-b.css" title="test2">
<link rel="stylesheet" href="css/style-c.css" title="test2">
<script>
function changesytle(cssid,cssfile) {
document.getElementById(cssid).href = cssfile;
}
</script>
</head>
本文中のセレクトメニューのソースは下記のとおりです。
<select onchange="changesytle('switch',value);">
<option value="css/style-a.css"> test1 </option>
<option value="css/style-c.css"> test2 </option>
<option value=""> 背景色なし </option>
</select>
このサンプルの場合は、背景色をブルーにした「style-a.css」と、ピンクにした「style-c.css」を切り替えればいいので、こうしました。
「文字サイズ」を切り替える場合は、そのCSSだけ独立させて、文字サイズを変えたCSSを何種類か用意し、そのCSSの読み込み用の <link>要素だけに id を付けて特定するといいかんじ。