# How to override custom CSS base style to use same core style? **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [September 22, 2023, 9:47am UTC](https://forum.inductiveautomation.com/t/how-to-override-custom-css-base-style-to-use-same-core-style/79495 "2023-09-22T09:47:08Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Pablo\_Fernandez\_Expo](https://avatars.discourse-cdn.com/v4/letter/p/c67d28/32.png) [@Pablo\_Fernandez\_Expo](https://forum.inductiveautomation.com/u/Pablo_Fernandez_Expo)\ **Post date:** [September 22, 2023, 9:47am UTC](https://forum.inductiveautomation.com/t/how-to-override-custom-css-base-style-to-use-same-core-style/79495/1 "2023-09-22T09:47:08Z")
Hi, Im trying to define a custom CSS style that "shapes" a button. Then I want to use this base definition and add or override a couple of styles like color or text color. Im sure this can be done but i cannot get it working. Example: ```auto .psc-generalbutton { border-radius: 30px !important; min-width: 120px !important; width: auto; max-width: 140px !important; height: 30px; padding: 0 !important; font-size: 0.9rem; font-weight: 400; overflow: hidden !important; display: flex !important; align-items: center; justify-content: center; } ``` Then I want to use this definition to create the green button final style. Something like this: ```auto .psc-greenbutton .psc-generalbutton { border: none !important; background-color: #1AFF80; color: black; } ``` If i connect the class "generalbutton" in the screen editor it works. But it does not work for "greenbutton" class: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/3/53ddd2043d121d7401e008114b003df014709df3.png) ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [September 22, 2023, 11:45am UTC](https://forum.inductiveautomation.com/t/how-to-override-custom-css-base-style-to-use-same-core-style/79495/2 "2023-09-22T11:45:33Z")
You cannot "extend" CSS classes like that. Put both classes on the target component. ---
**Author:** ![Pablo\_Fernandez\_Expo](https://avatars.discourse-cdn.com/v4/letter/p/c67d28/32.png) [@Pablo\_Fernandez\_Expo](https://forum.inductiveautomation.com/u/Pablo_Fernandez_Expo)\ **Post date:** [September 22, 2023, 12:00pm UTC](https://forum.inductiveautomation.com/t/how-to-override-custom-css-base-style-to-use-same-core-style/79495/3 "2023-09-22T12:00:56Z")
How? ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [September 22, 2023, 12:26pm UTC](https://forum.inductiveautomation.com/t/how-to-override-custom-css-base-style-to-use-same-core-style/79495/4 "2023-09-22T12:26:57Z")
Write both classes, or tick both classes in the menu... ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [September 22, 2023, 1:55pm UTC](https://forum.inductiveautomation.com/t/how-to-override-custom-css-base-style-to-use-same-core-style/79495/5 "2023-09-22T13:55:25Z")
_Cascading_ style sheets. Despite being called classes, it's not OOP. I don't really understand why the decision was made to do things the way they were so many years ago, but it's what the world is stuck with. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 25, 2023, 6:39am UTC](https://forum.inductiveautomation.com/t/how-to-override-custom-css-base-style-to-use-same-core-style/79495/6 "2023-09-25T06:39:18Z")
> [@Pablo\_Fernandez\_Expo](#): > > .psc-greenbutton .psc-generalbutton remove this space. assigned 2 classes on the same element should not have a space in between. > - descendant selector (space) > **[CSS Combinators](https://www.w3schools.com/css/css_combinators.asp)** > > W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [September 25, 2023, 6:48am UTC](https://forum.inductiveautomation.com/t/how-to-override-custom-css-base-style-to-use-same-core-style/79495/7 "2023-09-25T06:48:43Z")
I _think_ what he wanted was not to target elements that have both classes, but to make `greenbutton` inherit from `generalbutton`. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 25, 2023, 6:52am UTC](https://forum.inductiveautomation.com/t/how-to-override-custom-css-base-style-to-use-same-core-style/79495/8 "2023-09-25T06:52:14Z")
Ah there isnt realy inheritance, but you could just use ',' next to the general. every new class wil have to be added here too tho. Make sure they are on top of the list. As the one on top wil be overridden by the lower one (if they have the same selector) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/0/7050d23893cdf065a6bbb104184ce77d1e54cbd3.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/2/627cd4bb2e500faee447e980faf469c30fbf3329.png) ---
**Author:** ![Pablo\_Fernandez\_Expo](https://avatars.discourse-cdn.com/v4/letter/p/c67d28/32.png) [@Pablo\_Fernandez\_Expo](https://forum.inductiveautomation.com/u/Pablo_Fernandez_Expo)\ **Post date:** [September 25, 2023, 7:17am UTC](https://forum.inductiveautomation.com/t/how-to-override-custom-css-base-style-to-use-same-core-style/79495/9 "2023-09-25T07:17:23Z")
That worked, thanks!!