reveal.js title slide override

Question

I would like to style my reveal.js very first (title) slide slightly differently than my other slides. How could I create a separate section environment for "title" slides with:

1. All headings and text centered?
2. All contents vertically aligned in the middle?

My default (content) slides should be left-aligned and not vertically centered. This means that in the init part Reveal.initialize({... center: false, ...})

And for my custom theme.css, all headings and paragraph text are left-aligned with text-align: left.

I was hoping there would be some <section data-center=true> override option, but there does not seem to be. I have been fiddling with div's, but I am no great HTML/CSS guru.

As a follow up question, could this be automatically triggered if <h1> is used on a slide? That would allow me to use external Markdown for the contents and nothing else.

Answer 1

Just use a class to namespace your title slide

<section class="title-slide">
    <h1>Title</h1>
</section>

and style it with a higher specificity than the other slides

h1 {
    text-align: left;
}

.title-slide h1 {
    text-align: center;
}

This should address your second question as well without having to trigger anything dynamically.