title: Why is my page loading without any css?
body: <p>So this problem has been bugging me for a few days now. I've been trying to get a working nightmode switch on my site. I've asked on here before and after what I thought was the solution, using help from this site and stack exchange, I started experiencing an annoying problem.</p>
  
  <p>Here is a video of my problem: <a href="https://ryan-simms.com/problem" rel="nofollow noreferrer">https://ryan-simms.com/problem</a></p>
  
  <p>The problem only occurs when nightmode is enabled and I don't understand what the actual problem is. I've tried all sorts of different JavaScript codes with the same result everytime. Also before anyone says it's because of the DOMContentLoaded bit, I have already tried removing it on only using it when adding the EventListeners on my buttons.</p>
  
  <p>Also I tried to change the way getCookie() works with a few different methods.</p>
  
  <p>Are cookies the right way or is there a better way? </p>
  
  <p>Here is my HTML stripped down to the basics:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  
  &lt;html lang="en"&gt;
  
      &lt;head&gt;
  
      &lt;meta charset="utf-8"/&gt;
  
    &lt;title&gt;Ryan Simms&lt;/title&gt;
  
  &lt;link id ="pageStyle" rel="stylesheet" href='css/lightStyle.css' type='text/css'&gt;
  &lt;script src="scripts/lightSwitch.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/cookie.js"&gt;&lt;/script&gt;
  &lt;link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto' type='text/css'&gt;
  
  
      &lt;/head&gt;
  
      &lt;body&gt;
      &lt;script src="lightSwitch.js"&gt;&lt;/script&gt; &lt;!-- Loads LightSwitch Script --&gt;
  
    &lt;button type="button" id="lightSwitchOn"&gt;Turn On Night Mode&lt;/button&gt;
    &lt;button type="button" id="lightSwitchOff"&gt;Turn Off Night Mode&lt;/button&gt;
  
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my JavaScript:</p>
  
  <pre><code>document.addEventListener("DOMContentLoaded", handleDocumentLoad);
  
  function handleDocumentLoad() {
  
    var style = document.getElementById("pageStyle");
    var offSwitch = document.getElementById("lightSwitchOff");
    var onSwitch = document.getElementById("lightSwitchOn");
  
    offSwitch.addEventListener('click', lightsOn);
    onSwitch.addEventListener('click', lightsOff);
  
    function lightsOff() {
      document.cookie = "lights = off;  expires = Fri, 31 Dec 9999 23:59:59 GMT";
      style.setAttribute('href', 'css/darkStyle.css');
    }
  
    function lightsOn() {
      document.cookie = "lights = on;  expires = Fri, 31 Dec 9999 23:59:59 GMT";
      style.setAttribute('href', 'css/lightStyle.css');
    }
  
    function getCookie( name ) {
      var dc = document.cookie;
      var prefix = name + "=";
      var begin = dc.indexOf("; " + prefix);
      var end = null;
      if (begin == -1) {
          begin = dc.indexOf(prefix);
          if (begin != 0) return null;
          end = document.cookie.indexOf(";", begin);
      } else {
          begin += 2;
          end = document.cookie.indexOf(";", begin);
          if (end == -1) {
              end = dc.length;
          }
      }
  
      return decodeURI(dc.substring(begin + prefix.length, end) ).replace(/"/g, '');
  } 
  
  
    function checkCookie() {
      var nightmode = getCookie("lights");
      if (nightmode == "off") {
        lightsOff();
      } else {
        lightsOn();
      }
    }
  
    checkCookie();
   }
  </code></pre>
  
  <p>Here is my default CSS:</p>
  
  <pre><code>/*Layout for phones and tablets e.g. iPhone 5 and iPad*/
  
      /*webpage fades in*/
      html {
          animation: fadein 2s;
          position: relative;
          min-height: 100%;
      }
  
      /*animation*/
      @keyframes fadein {
          from { opacity: 0; }
          to { opacity: 1; }
      }
  
      /*main colour settings for page*/
      body {
          font-family: 'Roboto';
          font-size: 22px;
          color: #1C1C1C;
          background-color: #FFF;
          margin: 0 0 100px;
          padding: 25px;
      }
  
      /*List in nav*/
      li {
          list-style-type: none;
          display: inline;
      }
  
      /*Navigation*/
      nav {
          width: 100%;
          background-color: #D8D8D8;
          padding-top: 10px;
          padding-bottom: 10px;
      }
  
      ol {
          text-align: center;
          margin-right: 10px;
      }
  
      /*Links*/
      a, a:link, a:visited, a:hover {
          color: #1C1C1C;
          text-decoration: none;
      }
  
      /*Main heading*/
      h1 {
          position: relative;
          margin: 0 auto;
          text-align: center;
      }
  
      /*Images*/
      img {
          border: solid 0px #1C1C1C;
          border-radius: 5px;
          margin: 0 auto;
          text-align: center;
      }
  
      label {
          display: block;
          margin-bottom: 10px;
          margin-top: 10px;
      }
  
      textarea {
          width: 300px;
          height: 200px;
          margin-bottom: 10px;
          padding: 10px;
          border: solid 1px #1C1C1C;
          border-radius: 2px;
          resize: none;
      }
  
      input {
          border: solid 1px #1C1C1C;
          border-radius: 2px;
          padding: 5px;
      }
  
      #logo {
          border: 0px;
          display: inline;
          position: absolute;
          top: 40px;
          left: 30px;
          margin-left: 10px;
          font-size: 40px;
      }
  
      #enter {
          margin-top: 40px;
          max-width: 90%;
          max-height: 90%;
      }
  
      video {
          max-width: 80%;
          margin: 0 auto;
          display: block;
      }
  
      /*Footer*/
      footer {
          position: absolute;
          left: 0;
          bottom: 0;
          height: 100px;
          width: 100%;
          overflow: hidden;
          text-align: center;
      }
  
      /*Main Body*/
      #mainContent {
          padding: 10px;
          background-color: #D8D8D8;
          margin-top: 10px;
      }
  
      #mainContent img {
          display: inline;
          max-width: 375px;
          max-height: 375px;
          float: right;
          margin-right: 10px;
          margin-left: 10px;
      }
  
      /*Light Switches*/
      #lightSwitchOn {
          display: inline;
          position: absolute;
          top: 40px;
          right: 30px;
          margin-right: 10px;
          font-size: 40px;
      }
  
      #lightSwitchOff {
          display: none;
          position: absolute;
          top: 40px;
          right: 30px;
          margin-right: 10px;
          font-size: 40px;
      }
  
      #cookies {
          position: fixed;
          left: 0;
          bottom: 0;
          height: 8%;
          width: 100%;
          background-color: #D8D8D8;
          padding-left: 30px;
      }
  
  /*Layout for device with a min-width of 1024px*/
  @media only screen and (min-width: 1024px) {
  
      #enter {
          max-width: 60%;
          max-height: 60%;
      }
  }
  
  /*Layout for desktop with a min-width of 1280px (720p HD)*/
  @media only screen and (min-width: 1280px) {
  
      #enter {
          max-width: 40%;
          max-height: 40%;
      }
  }
  
  /*Layout for desktop with a min-width of 1920px (1080p HD)*/
  @media only screen and (min-width: 1920px) {
  
      #enter {
          max-width: 40%;
          max-height: 40%;
      }
  }
  </code></pre>
  
  <p>And my CSS when night mode is enabled:</p>
  
  <pre><code>/*Layout for phones and tablets e.g. iPhone 5 and iPad*/
  
      /*webpage fades in*/
      html {
          animation: fadein 2s;
          position: relative;
          min-height: 100%;
      }
  
      /*animation*/
      @keyframes fadein {
          from { opacity: 0; }
          to { opacity: 1; }
      }
  
      /*main colour settings for page*/
      body {
          font-family: 'Roboto';
          font-size: 22px;
          color: #FFF;
          background-color: black;
          margin: 0 0 100px;
          padding: 25px;
      }
  
      /*List in nav*/
      li {
          list-style-type: none;
          display: inline;
      }
  
      /*Navigation*/
      nav {
          width: 100%;
          background-color: #1C1C1C;
          padding-top: 10px;
          padding-bottom: 10px;
      }
  
      ol {
          text-align: center;
          margin-right: 10px;
      }
  
      /*Links*/
      a, a:link, a:visited, a:hover {
          color: #FFF;
          text-decoration: none;
      }
  
      /*Main heading*/
      h1 {
          position: relative;
          margin: 0 auto;
          text-align: center;
      }
  
      /*Images*/
      img {
          max-width: 100%;
          max-height: 100%;
          border: solid 0px #FFF;
          border-radius: 5px;
          margin: 0 auto;
          text-align: center;
      }
  
      label {
          display: block;
          margin-bottom: 10px;
          margin-top: 10px;
      }
  
      textarea {
          max-width: 100%;
          max-height: 100%;
          width: 300px;
          height: 200px;
          margin-bottom: 10px;
          padding: 10px;
          border: solid 1px #FFF;
          border-radius: 2px;
          resize: none;
      }
  
      input {
          border: solid 1px #FFF;
          border-radius: 2px;
          padding: 5px;
      }
  
      #logo {
          border: 0px;
          display: inline;
          position: absolute;
          top: 40px;
          left: 30px;
          margin-left: 10px;
          font-size: 40px;
      }
  
      #enter {
          margin-top: 40px;
          max-width: 90%;
          max-height: 90%;
      }
  
      video {
          max-width: 80%;
          margin: 0 auto;
          display: block;
      }
  
      /*Footer*/
      footer {
          position: absolute;
          left: 0;
          bottom: 0;
          height: 100px;
          width: 100%;
          overflow: hidden;
          text-align: center;
      }
  
      /*Main Body*/
      #mainContent {
          padding: 10px;
          background-color: #1C1C1C;
          margin-top: 10px;
      }
  
      #mainContent img {
          display: inline;
          max-width: 375px;
          max-height: 375px;
          float: right;
          margin-right: 10px;
          margin-left: 10px;
      }
  
      /*Light Switches*/
      #lightSwitchOn {
          display: none;
          position: absolute;
          top: 40px;
          right: 30px;
          margin-right: 10px;
          font-size: 20px;
      }
  
      #lightSwitchOff {
          display: inline;
          position: absolute;
          top: 40px;
          right: 30px;
          margin-right: 10px;
          font-size: 20px;
      }
  
      #cookies {
          position: fixed;
          left: 0;
          bottom: 0;
          height: 8%;
          width: 100%;
          background-color: #1C1C1C;
          padding-left: 30px;
      }
  
  /*Layout for device with a min-width of 1024px*/
  @media only screen and (min-width: 1024px) {
  
      #enter {
          max-width: 60%;
          max-height: 60%;
      }
  }
  
  /*Layout for desktop with a min-width of 1280px (720p HD)*/
  @media only screen and (min-width: 1280px) {
  
      #enter {
          max-width: 40%;
          max-height: 40%;
      }
  }
  
  /*Layout for desktop with a min-width of 1920px (1080p HD)*/
  @media only screen and (min-width: 1920px) {
  
      #enter {
          max-width: 40%;
          max-height: 40%;
      }
  </code></pre>
  
  <p>}</p>