Grow your CSS skills. Land your dream job.

Last updated on:

Different Stylesheets for Different Days of the Week

<script type="text/javascript">
dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
dayNumber = new Date().getDay();
document.writeln('<link rel="stylesheet" type="text/css" href="' + dayNames[dayNumber] + '.css">');

<link rel="stylesheet" type="text/css" href="default.css">

Name your css files accordingly: Saturday.css, Friday.css, Sunday.css, etc...

If JavaScript is disabled in the browser, it will revert back to the default.css file.


  1. V1
    Permalink to comment#

    Don’t use document.write, it will cause the page from displaying a white page for a few seconds before it processes the rest of page. I suggest using a document.createElement instead.

    Because white page of deaths is something your really want to prevent when you are working with dynamic stylesheet generation.

    For example:

    var dSS = {
    names: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    number: new Date().getDay(),
    link: document.createElement('link')
    } = "stylesheet"; = "text/css"; = dSS.names[ dSS.number ] + ".css";

    document.getElementsByTagName('head')[0].appendChild( );

  2. euan
    Permalink to comment#

    how would you create a time verision.

    so at a certain time it changes??

  3. Permalink to comment#

    So where do you write the css files?

  4. Nitin
    Permalink to comment#

    above given code is greet.

    can u please create java script code on time basis.


    12:00am – 4:00 am —– night.css etc,


  5. scooter29
    Permalink to comment#

    Thanks V1
    How would i make your code work monthly, just change the “getDay” to months and add them?

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".