Possible to apply a class to a class?

[Fiona]

On to my next question

I would like to define a style that I can apply to any other text, irrespective of the paragraph or class style already applied to it. Is that possible?

The reason I need this is that I want to say that any piece of text can be made italic, including headers, captions, table text (which is of a different font size) and body text that already has classes applied to it, such as bold or a different font. I can achieve this in the HTML by placing <em> tags around the text that I want to italicise but so far I've failed to define a single class that I can use to do this. In essence I want a class style that inherits everything from the text it is applied to, including other class styles, and the only change it makes is to italicise it.

[atomdocs]

Fiona - in this case you need to define a span class. A span class behaves like a character style, as other editing apps call it. Define the class with the properties that you want, e.g. italic, then when you select some text, e.g. inside a paragraph, your span classes appear in the style window (or you can select them using whatever method you use to apply styles).

[NorthEast]

Clicking the italic icon will insert <i> tags - is that not what you want?

[Fiona]

I need to be able to apply this style to words that already have a character style.

For example, I need to apply it to paragraph text that is Calibri size 12, table text (another paragraph style) that is Calibri size 11 and a code sample inline with the text (a character style) that is APL385 font size 11. Using the two suggestions above works fine with the paragraph styles but not where there is already a character style (class applied to characters).

This is similar to if I want to apply an italic style to words in the first and second paragraph below (which I can do) but also to one of the bold words in the third paragraph:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum varius arcu, semper commodo nibh suscipit in. Nam a elit sit amet magna pharetra elementum id id ligula. Mauris purus massa, sagittis non odio id, venenatis ornare nibh. Phasellus tristique, neque nec volutpat cursus, enim magna lobortis felis, vitae interdum tellus arcu sit amet quam.

Duis tristique, dolor a malesuada accumsan, enim nisi auctor tellus, sit amet efficitur mauris arcu eu tellus. Sed lobortis massa ut felis suscipit, et congue ipsum suscipit. Aliquam orci metus, maximus at arcu ut, venenatis sollicitudin ex.

In tempus mi ut risus consequat suscipit. Sed sed vulputate velit, viverra aliquam est. Ut malesuada nisi sit amet odio molestie, vel dictum neque egestas. Duis suscipit pellentesque massa. Nunc dapibus nisi non dolor dignissim iaculis. Fusce ac nibh in nulla volutpat auctor sed ut eros. Cras eu feugiat ipsum. Aliquam erat volutpat.

What I'm finding in Flare is that I can apply the italic style to one of the bold words but it loses its bolding...I need it to retain that.

[MattyQ]

What I'm finding in Flare is that I can apply the italic style to one of the bold words but it loses its bolding...I need it to retain that.

Definitely sounds like something is weird. In the case of a class, italics (or, style) and bold (or, weight) aren't even applied using the same property. For example, if you wanted a span that made text both italic and bold, you'd do something like:

Code: Select all

span.embold {
    font-weight: bold;
    font-style: italic;
}

So, this:

Code: Select all

<p>This is my <span class="embold">bold, emphasized</span> text.</p>

Would look like: This is my bold, emphasized text.

That said, you shouldn't need to implicitly set both unless somewhere you defined that a span can't be one or the other. For example:

Code: Select all

.em {
    font-style: italic;
}

.bold {
    font-weight: bold;
}

Examples: 
<p class="em">This is all italics, and this part is <span class="bold">bold</span> text.</p>
<p><span class="em">This is all italics, and this part is <span class="bold">bold</span> text.</span></p>
<p><i>This is all italics, and this part is <span class="bold">bold</span> text.</i></p>
<p><i>This is all italics, and this part is <b>bold</b> text.</i></p>
<p><em>This is all italics, and this part is <b>bold</b> text.</em></p>
<p style="font-style:italic;">This is all italics, and this part is <span style="font-weight:bold;">bold</span> text.</p>

All those examples above would result in the same line of text: This is all italics, and this part is bold text.
Demo: https://jsfiddle.net/MattyQ/s2rnkwt9/

Sounds like either a bug, or somewhere in your stylesheet you've declared a property value that's overriding your attempt to bold/emphasize particular words.