Not quite how CSS works - "C" being "Cascading". One of the things that catches people out regularly with CSS is its priority order. That can be a pain to wrestle with even for experienced users (I consider myself an overly enthusiastic amateur!)
CSS is generally applied in order of specificity of selector. So some CSS applied to a simple tag selector like div would be overriden by something with a selector of div#myid or div.myclass for example. You can also use the !important modifier to try and force things but that is generally best left as a final resort.
A style attribute applied to a tag would also generally take preference over a class applied to that tag.
Again, the browser dev tools shows you what is going on and lets you play with things dynamically.
So if you are using the ui_template node to load your iframe, you will have access to the tag itself and can simply apply a style attribute. If you are using a node to load the iframe though, you won't have direct access and would need to apply a class override.
In dev tools, select the element tab and click on the iframe tag. Then right-click and copy selector.
#eltest-upd-4 > span (yours will be different of course, that's just an example from one of my uibuilder test pages).
You can now put that into a ui_template to be loaded into the <head>:
