How can I reduce revealjs slide title font size? (And how can I tell what CSS classes to edit for different features?)

[jpierkunke]

Description

I frequently write Quarto revealjs documents. I was able to create a custom.css file with the following code to reduce the font size for main body text on slides that I mark with {.smaller}:

.smaller {
  font-size: 0.7em;
}

But despite searching, I have not yet been able to figure out how to reduce the default slide title size. Not the size of the title on the title slide, but the size of the title on each of the slides in the presentation. How can I do this?

More generally, I have been struggling to figure out what the CSS classes are for revealjs slides. If I want to adjust slide title font size, or change something about the formatting of unordered lists, where can I look up the name of the relevant CSS classes (like .reveal), ids (like #title), and/or elements (like h1) I need to change?

Any help is greatly appreciated!

[mcanouil]

The best and more accurate approach is to use your favourite browser developer / inspect mode.
Then you'll see the CSS/HTML thus everything you need to write your own (S)CSS.
Unfortunately, you still have to learn (S)CSS.

This being said, be sure to read the documentation: https://quarto.org/docs/presentations/revealjs/themes.html#sass-variables

[jpierkunke]

Thank you for your response. I do have some experience with CSS and can keep learning it on my own, but my concern is how to identify the specific classes and such as they are named in Quarto revealjs documents. I have previously found the link you shared, but I am not clear that this gives me the information I need to write a regular .css file; it seems I need to write a .scss file to use the information on the page you shared.

[mcanouil]

See the first part of my answer.
Note that most of the SCSS is not from Quarto, what you call "specific" is only what is provided by Reveal.js.

And yes, the variables are for SCSS which needs to be compiled into CSS, but Quarto does that when you give the SCSS file to theme as documented.