How to add custom inline styles in MkDocs material theme

Question

I've been searching for a way to add custom styles to my markdown pages. I've been able to add "extra_css" to the yml file, but that seems to only affect the generated html. For example, I was able to add a custom style for images that causes ALL items to be centered.

I know there is a way to add attributes using something along the lines of

{: #someid .someclass somekey='some value' }

So this is a two part question:

1. Where do I create the styles? In my custom css file declared in the yml?

Example: extra_css:
-custom.css

2. How to I reference (apply) them inline in my markdown?

Answer 1

Where do I create the styles? In my custom css file declared in the yml?

Yes, create a file in your docs_dir (default location is docs/) with the same name as you listed in the extra_css config setting of your mkdocs.yml configuration file. Then you can define any CSS you want within that file. More information is provided in the Customizing a Theme section of the documentation.

How to I reference (apply) them inline in my markdown?

You will need to enable the Attribute List extension. In your mkdocs.yml configuration file, include the extension in the list of markdown_extensions.

markdown_extensions:
    - attr_list

Then in your Markdown documents you can use attribute lists to assign classes, etc to various elements.