Those "var(--" snippets seem to point to a javascript (or other) integration of style. You would need to look at that integration before you start trying to replace the inline style, as it is not typical inline styling.

You forgot to say how the HTML is being generated. It sure doesn't look hand-rolled, so the question may be best addressed in a subforum that deals with whatever CMS you're using.

Hi there Arturo99,

to be totally blunt, I would suggest that you dump, posthaste,
whatever it is that produces that abominable excuse for code.

It should be coded like this...

HTML

<h1> 
 This is a - 
 <span>var test</span> 
 - for you
 </h1>

CSS

:root {
 --e-span-display: inline-block;
 --e-span-padding: 0.25em 0.5em;
 --e-font-family: arial;
 --e-font-size: : 1rem;
 --e-font-weight: bold;
 --e-text-color: #fff;
 --e-letter-spacing: 1px;
 --e-text-transform: capitalize;
 --e-background-color: #800;
 }
span {
 display: var( --e-span-display );
 padding: var( --e-span-padding );
 font-family: var( --e-font-family ), sans-serif; 
 font-size: var(--e-font-size);
 font-weight: var( --e-font-weight );
 color: var( --e-text-color ); 
 letter-spacing: var(--e-letter-spacing); 
 text-transform: var(--e-text-transform); 
 background-color: var(--e-background-color ); 
}

You can see an example here...

Full Page View

Codepen var() example [codepen.io]

coothead

CSS is your best friend. The code that appeared in the OP looks like nightmare pre-CSS coding.

span has a purpose ... but every line?

I reserve the h tags for their semantic use in document layout. Otherwise I use

p.whatever formatting to replace all those span statements used back in the bad old daze! (sic)

- If Wordpress is creating it, try changing themes
- If you use a minify CSS plugin, or SEO plugin that has inline CSS capability, turn that off and see if it was converting CSS files into inline CSS.
- If a service like Ezoic is creating it, try disabling the "inline CSS" option from the minify settings tab.

It's usually one of those. Let us know what CMS software you are using for specific advice.

Also, SOME inline CSS is fine, especially if your CSS files are small. I think Bing Webmaster Tools will give you a warning if the size of your page is too big, which usually means too much inline CSS.

Good luck