# How to setup local style sheet

**URL:** <https://community.plotly.com/t/how-to-setup-local-style-sheet/18146>\
**Category:** Dash Python\
**Created:** [January 16, 2019, 3:26am UTC](https://community.plotly.com/t/how-to-setup-local-style-sheet/18146 "2019-01-16T03:26:42Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![chainster\_mike](https://avatars.discourse-cdn.com/v4/letter/c/b782af/32.png) [@chainster\_mike](https://community.plotly.com/u/chainster_mike)\
**Post date:** [January 16, 2019, 3:26am UTC](https://community.plotly.com/t/how-to-setup-local-style-sheet/18146/1 "2019-01-16T03:26:42Z")

</div>

I have been using the [plotly/dash-salesforce-crm](https://github.com/plotly/dash-salesforce-crm) example to setup most of my dashboard. I am grateful for this example because even for someone without any front end knowledge, I am able to get a working dashboard.  
The problem I am having is that, being in China, I found the layout can be broken, if I don’t have a vpn setup. I suspect this is due to not able to load the online stylesheet. Therefore, I want to set up the style element as a static file locally, the style sheet I am using right now are the following: (I have no idea how they work, I just copy and paste from the example)

```python
    html.Link(href="https://use.fontawesome.com/releases/v5.2.0/css/all.css",rel="stylesheet"),
    html.Link(href="https://cdn.rawgit.com/plotly/dash-app-stylesheets/2d266c578d2a6e8850ebce48fdb52759b2aef506/stylesheet-oil-and-gas.css",rel="stylesheet"),
    html.Link(href="https://fonts.googleapis.com/css?family=Dosis", rel="stylesheet"),
    html.Link(href="https://fonts.googleapis.com/css?family=Open+Sans", rel="stylesheet"),
    html.Link(href="https://fonts.googleapis.com/css?family=Ubuntu", rel="stylesheet"),
    html.Link(href="https://cdn.rawgit.com/amadoukane96/8a8cfdac5d2cecad866952c52a70a50e/raw/cd5a9bf0b30856f4fc7e3812162c74bfc0ebe011/dash_crm.css", rel="stylesheet"),

```

and for the banner, I use these:

```python
external_css = [
    "https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css", # Normalize the CSS
    "https://fonts.googleapis.com/css?family=Open+Sans|Roboto" # Fonts
    "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
    "https://cdn.rawgit.com/TahiriNadia/styles/faf8c1c3/stylesheet.css",
    "https://cdn.rawgit.com/TahiriNadia/styles/b1026938/custum-styles_phyloapp.css"
]

```

You can probably tell by now that I have absolutely no idea how they work, and I have tried to search some of the forum result, but can’t really tell how to get them to work either. Can someone help me please?

---

<div class="post-metadata">

**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\
**Post date:** [January 16, 2019, 6:56am UTC](https://community.plotly.com/t/how-to-setup-local-style-sheet/18146/2 "2019-01-16T06:56:14Z")

</div>

I would suggest visiting each of those links in your browser (assuming your VPN allows it?) and copying everything into local CSS files. You then just need to put those files into a folder called `assets` in the same location as your main app script, Dash will detect the files and link them automatically. You can then delete the `html.Link` from your code, along with the `external_css` stuff. See the [Dash documentation](https://dash.plot.ly/external-resources) for more details on how to link local CSS.

---

<div class="post-metadata">

**Author:** ![chainster\_mike](https://avatars.discourse-cdn.com/v4/letter/c/b782af/32.png) [@chainster\_mike](https://community.plotly.com/u/chainster_mike)\
**Post date:** [January 17, 2019, 2:34am UTC](https://community.plotly.com/t/how-to-setup-local-style-sheet/18146/3 "2019-01-17T02:34:18Z")

</div>

Thanks for your help! Happy to report that it works!