0 votes
by (790 points)

This is the code I put in the CSS stylesheet:

.highlight {
  color:white;
  background-color: black;
}

But when I put this in a passage:

<span class="highlight">text</span>

There is white text on a black background, but the white text is italicised. I tried this on a new game and the same thing occurs. How can I get unitalicised white text on a black background?

1 Answer

+1 vote
by (159k points)
selected by
 
Best answer

If you use your web-browser's built-in Web Developer Tools to Inspect the .highlight classed span element generated when that Passage is viewed in your story HTML file you will see that the SugarCube story format has already associated CSS properties to the .highlight class.

.highlight, .marked {
    color: #ff0;
    font-weight: 700;
    font-style: italic;
}

note: you can also find the above CSS rule if you look at the core.css file linked in the Built-in Stylesheets section of the SugarCube 2.x CSS documentation.

So the reason why your 'highlight' text appears italicised is because you are extending an existing CSS rule.

by (790 points)
edited by
Thanks greyelf!
...