Applying Custom CSS#

To apply custom CSS, you can add a /custom/custom.css file in the jupyter config directory. You can find the path, ~/.jupyter, to this directory by running jupyter --paths. There you can create a folder named custom and create a custom.css file within the folder.

Jupyter Styling#

You can use a custom CSS file to modify default Jupyter styling.

/* Modify Jupyter Styles */
#jp-top-bar {
  background-color: #aecad4 !important;

#menu-panel {
  background-color: #aecad4 !important;

.jp-NotebookPanel-toolbar {
  background-color: #aecad4 !important;
.lm-MenuBar-content {
  color: #02484d;

a screenshot custom jupyter styling


Another potential application for custom CSS is styling markdown.

/* Headings */
h2 {
  font-family: Impact, Charcoal, sans-serif;
  font-weight: bold;
  text-shadow: 2px 2px 4px #000000;

h1 {
  font-size: 52px;
  margin-bottom: 40px;
  color: #10929e;
  text-decoration: underline;

h2 {
  font-size: 448px;
  margin-bottom: 32px;
  color: #76b4be;
  text-transform: uppercase;

/* Block Quotes */
blockquote {
  font-family: Georgia, serif;
  font-size: 16px;
  color: #19085c;
  border-left: 8px solid #effffc;
  background-color: #eafcff;
  padding: 20px;

/* Lists */
ol {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 18px;
  color: #333333;
  margin-bottom: 24px;

a screenshot of custom markdown styling