How do I change Font size (and other style changes) in a Gradio block?

Beginners
1

Hi, I am deploying my model using Gradio (great!).

I will like to increase the Font size of the texts in the forms but cannot find the way.

I read the documentation, watched videos, but cannot resolve it.

Created a .css file but, does not work properly.

Where could I find a style sheet guide and / or code examples?

Thanks!!

2

I finally found this resource that helped me.

Thanks!

3

It didn’t work. Can you share the solution?

4

Gradio has many incompatibilities in its syntax between the 3.x and 4.x series.
His solution probably worked back in 3.x. The following elem_classes are easy to use in the 4.x series.

Note, however, that css often does not work without !important;, and even if it does, it is often impossible.
If you try to force a workaround in the css style (display: inline-block;, etc.), you may in turn get caught in the layout collapse bug.

css = '''
.info {text-align: center; font-size: 3em; !important}
'''
with gr.Blocks(css=css) as app:
~~
    gr.Checkbox(label="test", value=False, elem_classes="info")