Body: <p>I'm working on an epub in Sigil. Things are going pretty good, but I'm puzzled by some kind of CSS bug.</p>
  
  <p>For example, I want all the fonts in the table of contents section to be sans-serif. So I put the following rule in the style sheet attached to that page:</p>
  
  <pre><code>body { font-family: sans-serif; }
  </code></pre>
  
  <p>But font inside certain elements was still serif.</p>
  
  <p>So I added some inline styles, but that didn't work. So I gave some of these elements classes, then changed the style sheet to this:</p>
  
  <pre><code>body, div.Plants { font-family sans-serif; }
  </code></pre>
  
  <p>That works better...but it still doesn't work on elements inside elements. For example...</p>
  
  <pre><code>&lt;div class="Plants"&gt;This is a &lt;span&gt;nested element&lt;/span&gt;.&lt;/div&gt;
  </code></pre>
  
  <p>When I preview my epub, the text inside the span displays with a serif font. I can't fix it with inline fonts or by adding the span to my style sheet.</p>
  
  <p>Is there some sort of secret to making style sheets communicate with pages in epubs?</p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-04-16T18:13:31.627Z
Comments.Text: Clarifying questions: how are you testing? What devices/reading systems?  Have you verified that your CSS validates? https://jigsaw.w3.org/css-validator/
Comments.UserDisplayName: idiotprogrammer
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-04-16T18:16:14.000Z
Comments.Text: Generally I haven't had any problems getting fonts to work on the manual TOC page.  Frequently though, two CSS declarations are in confict, so it may help to use the browser inspector (by right-clicking the web page) to verify which classes apply to an element.
Comments.UserDisplayName: idiotprogrammer
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-04-16T18:18:01.180Z
Comments.Text: Some misspellings on what you pasted: no colon after font-family . I assume this is not the issue.
Comments.UserDisplayName: idiotprogrammer
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-04-17T02:40:09.757Z
Comments.Text: I'm viewing my epubs with iBooks. I haven't converted any of them to Kindle yet. Thanks for the tip about the missing colon; yes, that was just a typo above. I haven't validated the CSS, but I can give that a try. Things just seem to be really fickle. Everything works fine until I make some tiny change. I don't have this problem with my web pages.
Comments.UserDisplayName: WordBear
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-04-17T02:44:46.937Z
Comments.Text: Actually, you may have already solved the problem. I thought there might be some well known problem with CSS in epubs, but it sounds like this is either a case of operator error or some nitpicky issue I just have to isolate.
Comments.UserDisplayName: WordBear
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-04-17T16:49:06.160Z
Comments.Text: Wordbear, don't worry; we've all been there before!
Comments.UserDisplayName: idiotprogrammer
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-04-18T23:32:18.977Z
Comments.Text: For anyone else with the same problem, I just made an interesting discovery. For some reason, .Class { color: #f00; } may not work on hyperlinked items. The fix is simple: .Class, .Class a { color: #f00; } I fixed another bug by simply replacing the links with tiny images.
Comments.UserDisplayName: WordBear
Tags: <css>
Title: Need a Workaround for CSS Overrides
UserDisplayName: WordBear
ThreadText: # Need a Workaround for CSS Overrides
  
  (Asked by: username_0 on 2017-04-16)
  
  I'm working on an epub in Sigil. Things are going pretty good, but I'm puzzled by some kind of CSS bug.
  
  For example, I want all the fonts in the table of contents section to be sans-serif. So I put the following rule in the style sheet attached to that page:
  
  ```
  body { font-family: sans-serif; }
  
  ```
  
  But font inside certain elements was still serif.
  
  So I added some inline styles, but that didn't work. So I gave some of these elements classes, then changed the style sheet to this:
  
  ```
  body, div.Plants { font-family sans-serif; }
  
  ```
  
  That works better...but it still doesn't work on elements inside elements. For example...
  
  ```
  <div class="Plants">This is a <span>nested element</span>.</div>
  
  ```
  
  When I preview my epub, the text inside the span displays with a serif font. I can't fix it with inline fonts or by adding the span to my style sheet.
  
  Is there some sort of secret to making style sheets communicate with pages in epubs?
  
  **Tags:** css
  
  > **Comments:**
  > **username_1**: Clarifying questions: how are you testing? What devices/reading systems?  Have you verified that your CSS validates? https://jigsaw.w3.org/css-validator/  
  > **username_1**: Generally I haven't had any problems getting fonts to work on the manual TOC page.  Frequently though, two CSS declarations are in confict, so it may help to use the browser inspector (by right-clicking the web page) to verify which classes apply to an element.  
  > **username_1**: Some misspellings on what you pasted: no colon after font-family . I assume this is not the issue.  
  > **username_0**: I'm viewing my epubs with iBooks. I haven't converted any of them to Kindle yet. Thanks for the tip about the missing colon; yes, that was just a typo above. I haven't validated the CSS, but I can give that a try. Things just seem to be really fickle. Everything works fine until I make some tiny change. I don't have this problem with my web pages.  
  > **username_0**: Actually, you may have already solved the problem. I thought there might be some well known problem with CSS in epubs, but it sounds like this is either a case of operator error or some nitpicky issue I just have to isolate.  
  > **username_1**: username_0, don't worry; we've all been there before!  
  > **username_0**: For anyone else with the same problem, I just made an interesting discovery. For some reason, .Class { color: #f00; } may not work on hyperlinked items. The fix is simple: .Class, .Class a { color: #f00; } I fixed another bug by simply replacing the links with tiny images.  
  
  ---
  
  ## 0 answers
  
  