✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Html components span element

How do I use the span element to change formatting of specific words in sentences?

I recommend formatting the text with dcc.Markdown instead. Otherwise you’ll have to do it with children:

html.Div([
    'Lorem ipsum ',
    html.Span(' dolor ', style={'color': 'blue'}),
    ' sit amet'
])

What if I want to put a className inside the div? See below?

html.Div(
    className="app-header",
    children=[
        html.Div([html.Span('First Part', style={'color': 'blue', 'font-style': 'italic', 'font-weight': 'bold'}), ' Second Part'])
    ]
)

Fore example, I’d like something like this (Maybe this is the incorrect approach?):

app.layout = html.Div([
html.Div(
className=“app-header”,
children=[
html.Div([html.Span(‘First Part’, style={‘color’: ‘blue’, ‘font-style’: ‘italic’, ‘font-weight’: ‘bold’}), ’ Second Part’, className=“app-header–title”])
]
)