Lectora Inspire and HTML Extensions, CSS

Publish the file. Open the file in Dev Tools (F12) and see if it's really included, if the CSS classes really match, if the properties inspector shows the class being applied etc.

Or make the file available to us so we can see what exactly you did wrong and comment.

I'm having the same experience in trying to implement CSS in Lectora Inspire 11.3.2 (9293). I've published and checked the the .html and .css files. I'm not a CSS expert, but it looks to me like my custom class is being superceded by another class specified by Lectora. I can go into the .html file, find the text I'm trying to effect and change the class assigned in the SPAN tag to my custom class and everything looks fine. But I can't imagine that's the way it's supposed to work. Otherwise, what's the point of Lectora allowing me to assign a class to a text block?

The point of assigning a class to a text block is:

1. Make it universally selectable for JavaScript

2. Style it.

Now when styling an element, you should take into account:

1. How the 'C' in CSS works (quick guide: https://developer.tizen.org/dev-guide/2.2.1/org.tizen.web.appprogramming/html/guide/w3c_guide/dom_guide/html_priorities_css.htm)

2. How Lectora's elements are composed.

E.g. if you just assign "mystyle" class to a text block and publish, it won't work, because you'll get roughly this:

.mystyle {color: red;}

#spanID {color: black;}

< div class="mystyle" > < span id="spanID"> some text < /span > < /div >

Naturally, the text will be black because ID selector overwrites CLASS selector.

So you need to tinker with your CSS a bit more to get the code right. The quickest way is to usually add the !important parameter to it.

Thanks, both for the link and the general info. I'm finally starting to grok CSS hierarchy a bit better. Next stop (I hope) - dynamically applying classes with js!