Black Lives Matter. Please consider donating to Black Girls Code today.

How to create css classes in dash

Right now i have

html.Img(src='', className='logo'),
                   ], style={'.logo': {'width': '150px', 'length': '200px', 'float': 'right'}

as my code. I am trying to create a css class called ‘logo’ to adjust the image i have, but it doesn’t affect the output at all. What is the correct syntax for to create css classes? Or is this not the recommended way of doing this? Thanks

It’s pretty similar to HTML except that class is className, so:

html.Img(src='...', className='logo')

Alternatively, if you just want to style inline:

html.Img(src='...', style={'width': '150px', 'float': 'right'})

I’ve styled it inline and it works great. But i still could not get it to work using the class. Does class name have to match exactly like the class name in the style{}? For example my class name in the above code was ‘logo’ so i’m assuming inside style{}, i have to set ‘logo’ as a class by doing style={’.logo’={css styles for logo}}, but this does not seem to work, neither does removing the ‘.’ before ‘logo’. Would it be possible to provide an example of how the syntax would work for styling with class names?