Why does text become italicised when highlighted?

Question

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?

Answer 1

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.

Comments

Thanks greyelf!