mmcguff · May 11, 2020 15:59
diff --git a/blue.css b/blue.css
 body {
    background-color: blue;

 }
diff --git a/default.css b/default.css
 body {
    background-color: green;

 }
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
    <title>css example</title>

    <!-- Placing the logic for style swapping in the head of my html so its be available for toggling style -->
    <script>
        function swapStyle(sheet) {
            document.getElementById('pagestyle').setAttribute('href', sheet);
        }
    </script>

 </head>

 <body>
    <h1>CSS Example Style Sheet</h1>
    <button onclick="swapStyle('blue.css')">Blue</button>
    <button onclick="swapStyle('red.css')">Red</button>
    <button onclick="swapStyle('default.css')">Green</button>
 </body>

 </html>
diff --git a/red.css b/red.css
 body {
    background-color: red;

 }
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
	<title>css example</title>

	<!-- Placing the logic for style swapping in the head of my html so its be available for toggling style -->
	<script>
	function swapStyle(sheet) {
	document.getElementById('pagestyle').setAttribute('href', sheet);
	}
	</script>

	</head>

	<body>
	<h1>CSS Example Style Sheet</h1>
	<button onclick="swapStyle('blue.css')">Blue</button>
	<button onclick="swapStyle('red.css')">Red</button>
	<button onclick="swapStyle('default.css')">Green</button>
	</body>

	</html>