Embedding Style Sheet Switcher

HTML & CSS
13

Just for fun and seeing as we are in the CSS forum here’s a CSS version.:slight_smile:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<style>
.wrap {
	max-width:960px;
	margin:auto;
	background:#f9f9f9;
	padding:10px;
	border:1px solid #000;
	transition:all 1s ease;
}
#style1:checked ~ .wrap {
 	max-width:600px;
 	background:red;
 	color:#fff;
}
#style2:checked ~ .wrap {
 	max-width:1200px;
 	background:orange;
 	color:#fff;
 	display:flex;
}
#style2:checked ~ .wrap p, #style2:checked ~ .wrap h1 {
	border:1px solid #ccc;
	background:blue;
	padding:20px;
	margin:0;
}
#style3:checked ~ .wrap {
 	max-width:980px;
 	background:yellow;
 	color:#000;
 	margin:auto;
}
#style2:checked ~ .wrap p, #style2:checked ~ .wrap h1 {
	border:1px solid #ccc;
	background:blue;
	padding:20px;
}
</style>
</head>

<body>
<input type="radio" name="style" id="style1">
<label for="style1">Style 1</label>
<br>
<input type="radio" name="style" id="style2">
<label for="style2">Style 2</label>
<br>
<input type="radio" name="style" id="style3">
<label for="style3">Style 3</label>
<div class="wrap">
  <h1>This is a test</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin faucibus, magna et feugiat ullamcorper, augue risus imperdiet nunc, ut placerat felis elit ac quam. Mauris accumsan vulputate eleifend. Nulla id sapien elit. Duis ac nibh pharetra, dignissim nisi eu, ullamcorper lectus. Vivamus vulputate ex vel augue venenatis egestas. Praesent ut hendrerit enim. Morbi id aliquam eros. Praesent vulputate ut nunc sit amet efficitur. Proin iaculis sit amet eros sed porttitor. Phasellus fermentum pretium viverra. Donec bibendum viverra faucibus.</p>
</div>
</body>
</html>
4 Likes