Posted on by & filed under Content - Highlights and Reviews, Programming & Development.

code A guest post by Jonathan Frederic who is currently working as a full time IPython Developer. He works on the IPython Notebook and related tools, and enjoys spending his spare time writing a video game in Python. He can be contacted either by email at or on GitHub at

The IPython Notebook style is designed for the most common usages, however, some usages may require a different style. The Notebook is easily styled with Cascading Style Sheets (CSS).

The Notebook is an HTML 5 document, built almost entirely using nested div elements. Each element has one or more classes applied to it. These classes are how we specify the styling of individual elements on the page.

IPython and CSS

CSS files can become very large. LESS is a system that allows you to break large CSS files into small, easy to manage segments. IPython uses LESS files instead of one large CSS file. Most of the LESS files used to style the Notebook are located in /ipython/IPython/html/static/notebook/less. The rest of the LESS files are found in /less subdirectories of /ipython/IPython/html/static.

You should not edit the IPython LESS files to change your Notebook’s style. Doing so will limit the custom Notebook style to your machine and possibly damage your IPython installation.

To change the style of your Notebook, you must first create some custom CSS code that overrides the default Notebook style. To do this, you can use a plain text editor. Once you have some code, one way to test it is to use the developer mode of your web browser. Both Mozilla Firefox and Google Chrome have a developer mode that allows you to interactively manipulate the Notebook’s CSS. Another way to test it is to type it into an HTML magic code cell. This process is demonstrated below:

Tested CSS code will need to be moved to a permanent location. One option is to store the file in the /static/custom/ subdirectory of your profile directory (see my Writing IPython Notebook Plugins post). This will make the formatting available to all Notebooks stored and viewed on your machine. This option is limited because the style changes do not export along with the Notebook.

IPython’s display function

A second option is to use IPython’s display function to publish the CSS to the Notebook file. The benefit of doing it this way is that the style will be distributed along with your Notebook. To do this, create a Python file. An example follows:

Place the file in the same directory as the Notebook you want to style. Open the Notebook, create a code cell and import the Python file. When you execute the cell, the style will apply. When sharing the Notebook, you do not need to include the Python file.


You should now have a good idea on how to change your Notebook style.

See below for IPython resources from Safari Books Online.

Not a subscriber? Sign up for a free trial.

Safari Books Online has the content you need

Mining the Social Web, 2nd Edition combines popular and useful social web data with analysis techniques and visualization to help you find the needles in the social haystack that you’ve been looking for—as well as many you probably didn’t even know existed. You’ll also find an appendix that covers IPython Notebook tips and tricks.
Learning IPython for Interactive Computing and Data Visualization covers all aspects of IPython, from the highly powerful interactive Python console to the numerical and visualization features that are commonly associated with IPython.
Practical Data Analysis is a hands-on guide to understanding the nature of your data and turn it into insight. It will introduce you to the use of machine learning techniques, social networks analytics, and econometrics to help your clients get insights about the pool of data they have at hand. Performing data preparation and processing over several kinds of data such as text, images, graphs, documents, and time series will also be covered, and covers the IPython Notebook.

Tags: CSS, html5, IPython, IPython Notebook, LESS, Python,

Comments are closed.