"style" rules in plotly

đź“Š Plotly Python
1

My question is about “style” rules in plotly. I learned style rules in CSS. For example, to center text in a “Div” is
text-align: center;
but a couple of tutorials that I found, including this one:
https://thenewstack.io/introduction-to-plotly-dash-the-most-popular-ai-data-tool/
show
'textAlign':'center'
—> text-align vs textAlign
This bothers me because, after learning CSS, I don’t want to learn another styling system. Mind you, I see that both instructions work, but that does not diminish my style question because I don’t know when I can use CSS styling and when I will have to root out some other rules.
Thank you

2

Hi,

As you said, both will work with Dash.
I think the camelcase notation comes from React, that is used under the hood of Dash.
But Dash is handy enough so that you can always write regular css like text-align and background-color, etc.

Here is my experience: I know CSS for a decade and I never had any trouble using basic CSS with the style attribute of Dash. So your knowledge will transfer without problem.

Side note: I still avoid adding the style attributes in Dash because it will reload the entire application if you just update the styles in your .py file. On the other hand, if you have a proper .css file and set your styles inside, the Dash application will just reload the modifications in the browser, without reloading the whole app.
Which makes it in my opinion easier and faster.

Hope it helps,

1 Like
3

To follow up on @spriteware’s great answer - although both will work in Dash, if you don’t use the camelCase, you will see a warning message in the console - something like:

Warning: Unsupported style property text-align. Did you mean textAlign?
1 Like
4

@spriteware - Thank you! Tutorials typically put style right in the script and I am just following along. Taking your advice, when I get serious I will switch to a stylesheet.

5

@AnnMarieW - Thank you! I will be on the lookout for that Warning and not panic. :slight_smile: