Assign a custom CSS file to a single container on a main HTML page?

Wappler General How To
#1

Is there a way to associate a custom CSS file to a single container element on a main HTML page?

Meaning, I have elements on the index page but I have a container section that has three elements that need applied custom CSS to those three internal elements only. I would normally associate class tags to these elements however If I call a container, container, etc. The Bootstrap5 styles over ride my style needs.

Let me clarify, if I have a card, and bootstrap is assigning a border along with a border color. But I just want that card to not have a border and not effect the overall card style. How do I accomplish this?

Hope this makes sense.

Thanks for any help

#2

Element styles will take precedence over class styles so you can apply a style to the exception elements. But also consider that the ! Important attribute has priority, so you may need to add that to your element styles.

#3

Select the card and apply a Bootstrap class of border-none:

image
image1525×879 91 KB

#4

Thank you

I am working with custom CSS styles so !important was the ticket there.