Add custom CSS

Customize your styles by adding CSS files or adding styles inline.

Add CSS files

To add extra CSS files, add your custom styles to a file—for example, _static/custom.css and add the following options to your Sphinx configuration:

pythonFile: conf.py

html_static_path = ["_static"]
html_css_files = ["custom.css"]

Your custom CSS file is included after the theme’s default CSS. Because of different CSS specificities, you might need to add !important to your CSS styles.

Extend templates with inline CSS

If you want to add CSS inline, you can extend the default page template and override the extrahead block:

html+jinjaFile: page.html

{% extends "!page.html" %}

{{ super() }}

{% block extrahead %}
<style>
 /* Add your CSS styles here */
</style>
{% endblock %}

Override CSS custom properties

You can override these custom properties:

--color-brand: The color for hover, focus, and highlight styles
--color-links: The color for links in the main text.

For example, to change the color of links to green, add a new CSS file or extend the templates and add the following CSS:

css

:root {
   --color-links: green;
}