Styles and CSS Classes

MyST has basic support for styling your content with CSS. This page describes some common ways to do so.

Use content blocks¶

Content blocks allow you to attach arbitrary metadata to chunks of content. You can attach one or more CSS classes by defining a class attribute for a block. For example the following:

+++ {"class": "col-gutter-right"}
Right-styled

+++

Normal-styled

Results in:

Normal-styled

Use div and span elements¶

You can attach classes directly to div and span elements.

{div} and {span} are analogous to their HTML counterparts. Unlike their directive/role, the HTML elements can also be given style options, e.g.

Here’s some Span content

Add CSS classes to directives¶

Many directives and content blocks have a :class: option that can be used to add arbitrary CSS classes. For example, below we add a CSS class to an admonition directive to snap it to the right:

```{note}
:class: col-gutter-right
I'm on the right!
```

Use the HTML theme grid system classes to position content¶

The HTML themes come with a grid system of CSS classes. You can use these to position content according to the link above.

Use Tailwind CSS classes¶

You can use any Tailwind CSS class that’s loaded on a page to style your content. See the Tailwind documentation for examples of how to do this. If a class seems to have no effect, it is likely not loaded on the page by MyST. Currently, it’s not possible to customize which classes are included on a page (see above for an issue tracking this).