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

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

<div>Example code</div>

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

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