How to load CSS files?

1

I don’t how to properly load external CSS files. This could broke everything, but I already load a CSS files using javascript or html’<link… with great results.

1 Like
2

Yep! It’s all just good ol’ HTML and JavaScript, so a link element, how you’d expect, is the way to go. From what I see in your notebook:

css = {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = "https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.css";
    return document.getElementsByTagName("head")[0].appendChild(link);    
}

You can shorten this to

html`<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.css" rel="stylesheet" />`

Thanks to some fine points of HTML5, stylesheet links don’t have to be in the <head> anymore and can be anywhere in the document.

4 Likes
3

Javascript version working well for me.

Good old HTML works on some of my notebooks / not on others. So I am glad that you showed us how to reference stylesheets programatically, @tom. Thank you.