Colored boxes around sections of a sentence

Using Streamlit
, ,
2

Hi @rutvik,

I usually put my CSS in an external file and then load it into Streamlit, then the rest is pure HTML/CSS + python f-string formatting…

  • style.css
.highlight {
  border-radius: 0.4rem;
  color: white;
  padding: 0.5rem;
  margin-bottom: 1rem;
}
.bold {
  padding-left: 1rem;
  font-weight: 700;
}
.blue {
  background-color: lightcoral;
}
.red {
  background-color: lightblue;
}
  • load_css.py
"""
https://discuss.streamlit.io/t/are-you-using-html-in-markdown-tell-us-why/96/25
"""
import streamlit as st

def local_css(file_name):
    with open(file_name) as f:
        st.markdown('<style>{}</style>'.format(f.read()), unsafe_allow_html=True)
  • app.py
import streamlit as st

from load_css import local_css

local_css("style.css")
 
t = "<div>Hello there my <span class='highlight blue'>name <span class='bold'>yo</span> </span> is <span class='highlight red'>Fanilo <span class='bold'>Name</span></span></div>"

st.markdown(t, unsafe_allow_html=True)

image

12 Likes