Removing element.style styling using css stylesheet

Authoring Twine
1

Twine Version: 2.6.2.0
Harlowe

I’m trying to reduce the margin of columns via the CSS stylesheet, but cannot figure out how to override styles applied by element.style.

Here is what I see when I inspect the tw-column element in the html:

The (?) element (? I hope I’m using this word correctly) that believe is causing the problem is:

<tw-column type="center" style="width:66.66666666666666%; margin-left: 1em; margin-right: 1em;">

The troublesome style overriding my stylesheet is:

element.style {
    width: 66.66666666666666%;
    margin-left: 1em;
    margin-right: 1em;
}

I can see from ‘inspect’ that the above overwrites the following (from my stylesheet):

tw-column {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

I am assuming I need to add something to my stylesheet to make tw-column styles override that element.style, but I’m not sure how to do that.

I am also wondering if my struggle has something to do with the fact that I’m using Harlowe’s built-in, user-friendly method of making columns. Possibly that’s what’s tripping up my attempts to style it in my stylesheet? For reference, many of my passages look like this:

=|=
Link here
=||||=
Big block of text
=|=
Link here
|==|

Thanks so much for all your help.

2

Unfortunately Harlowe macros like to generate what’s know as inline CSS, which is the term for CSS Property assignments that are done within the style attribute of a HTML element.

Because inline CSS is considered to have a higher specificity than “external” CSS, it automatically wins when two (or more) pieces of CSS apply a value to the same CSS property of an element. And this is why your “external” CSS Rule that is targeting the <tw-column> element doesn’t seem to be doing anything.

CSS does have a special !important flag that can be used to override inline CSS, but it is generally conceded a “last resort” option.

Try changing your CSS Rule to the following…

tw-column {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
}
3

This has worked! Thank you very much. I appreciate your explanation of why it worked, as well - given that this is a sort of last-resort, I’ll use this trick sparingly.