Is there a way to make certain additional CSS that is added only apply to specific pages?

[Fatih20]

I wanted elements in my home sections to have different specifications to elements in my installation section. Is there a way to do as the title says? I know that I could just put all elements in the page to one class and all elements in the installation page to another, and then add any page-specific specification to those classes, but is there a more elegant way to do this?

[squidfunk]

Yes, you can use HTML in Markdown:

<link rel="stylesheet" href="link/to/stylesheet" />
<style>
  /* Inline styles */
</style>

Note that the stylesheet link probably has to be absolute, or it won't work correctly.

Alternatively, you can use theme extension, as Material for MkDocs does itself for the homepage, and provide a separate template for each site, which adds the relevant stylesheets.

mkdocs-material/src/overrides/main.html

Lines 25 to 33 in 619d47f

	<!-- Custom front matter -->
	{% block extrahead %}
	<!-- Extra stylesheets (can't be set in mkdocs.yml due to content hash) -->
	<link
	rel="stylesheet"
	href="{{ 'overrides/assets/stylesheets/main.css' | url }}"
	/>
	{% endblock %}

[Fatih20]

Is the style just placeholder and doesn't need to be filled with anything?

[squidfunk]

You could either use link or style, depending on whether you want to define things inline or external. The example was meant to illustrate that both ways are possible.

[Fatih20]

You could either use link or style, depending on whether you want to define things inline or external. The example was meant to illustrate that both ways are possible.

Ah, alright. Thanks!