Quote:
Originally Posted by Hitch
I'm going to have to see--and I know that this sounds odd--if we use multiple CSS classes anywhere. For MOBI, I mean. I don't think we do. ID's and classes, yes, of course. I asked Barb (the best bookmaker here, bar none) if she did, and she said she did, but ...I don't think so. I don't believe that any of us can think of multiple classes actually working, not for MOBI. Not with conflicting or not clearly-conformed styles. I just think that the mobi conversion loses its mind.
|
AFAIK, you can have multiple classes, and as long as they don't contradict each other, nothing unexpected happens. However, if they do contradict each other the style last defined in the stylesheet wins, which might lead to unexpected results.
I've created a simple test file with two html files that contain exactly the same code and two stylesheets with exactly the same styles. The only difference is that in the second stylesheet the first style was moved to the end of the stylesheet.
HTML code
Code:
<body>
<h3>Chapter 1</h3>
<div class="first third">
<p class="third first">It was a dark and stormy night.</p>
<p class="first second">And so it began...</p>
<p>The End.</p>
</div>
</body>
page 1 style
Code:
.first {
text-align: left;
color: green;
font-weight: bold;
font-family: sans-serif;
font-size: 1.5em;
}
.second {
text-align: right;
color: blue;
font-family: monospace;
font-style: oblique;
font-size: 1em;
}
.third {
color: red;
font-variant: small-caps;
text-align: center;
}
page 2 style
Code:
.second {
text-align: right;
color: blue;
font-family: monospace;
font-style: oblique;
font-size: 1em;
}
.third {
color: red;
font-variant: small-caps;
text-align: center;
}
.first {
text-align: left;
color: green;
font-weight: bold;
font-family: sans-serif;
font-size: 1.5em;
}
As you can see, rearranging the styles makes a difference.