Which one to apply: HTML tagging or CSS stylesheets?

neyet · 12-28-2014, 04:14 AM

When composing a text-only ebook using a simple text editor, do you apply HTML tagging or CSS stylesheets throughout?

Toxaris · 12-28-2014, 04:49 AM

Stylesheets all the way.

neyet · 12-28-2014, 07:27 AM

Quote:

Originally Posted by Toxaris

Stylesheets all the way.

(A) I suppose I need to create only one CSS stylesheet using a simple text editor as I am only creating one EPUB ebook?

(B) How do I link the CSS stylesheet to the text-only document that will become the EPUB ebook? An example would be helpful.

(C) Do I use CSS3 or CSS2?

Wendy Wolfe · 12-28-2014, 09:10 AM

A few thoughts:

1) The stylesheet is linked to the html files in the <head> section

<head>
....
<link href="../../styles/default.css" rel="stylesheet" type="text/css"/>
</head>

2) Have you considered using Calibre or Sigil to edit the ebook rather than a simple text-editor? (They give you full control over the html.) The upside is that with the tools: dealing with the spine, toc.ncx, and inline TOC is much easier. And the debug tool is very handy.

3) CSS3 is a superset of CSS2. What CSS3 features are you considering (and have you checked that ereaders support it)?

Toxaris · 12-28-2014, 09:29 AM

I would strongly recommend an editor like Sigil. Also, keep it on CSS2 (and ePUB2) for better compatibility.

Keep in mind that it is strongly recommended to keep the XHTML file below 280k. Especially older readers have a limit there. Rule of thumb is a XHTML file per chapter. With a stylesheet you have much, much better control.

Doitsu · 12-28-2014, 10:11 AM

Quote:

Originally Posted by neyet

When composing a text-only ebook using a simple text editor, do you apply HTML tagging or CSS stylesheets throughout?

BTW, if you use Markdown formatting, you can automatically convert your book to the epub format (and a couple of other formats) with pandoc.

There are also a couple of dedicated authoring systems for fiction/script writers that offer ePub export.

odedta · 12-28-2014, 10:27 AM

If you're using any sort of media query via CSS3 make sure it's in a separate CSS file.

theducks · 12-28-2014, 12:50 PM

Quote:

Originally Posted by Toxaris

I would strongly recommend an editor like Sigil. Also, keep it on CSS2 (and ePUB2) for better compatibility.

Keep in mind that it is strongly recommended to keep the XHTML file below 280k. Especially older readers have a limit there. Rule of thumb is a XHTML file per chapter. With a stylesheet you have much, much better control.

to all points

You can always save (export) your CSS to use with your next book

A CSS can be very simple

if you set the most used attributes

p { the style for the bulk of the body paragraphs}

p.a_special_case {when different from the base}

<p>A normal paragraph</p>
<p class="a_special_case">This may be an all bold-italic paragraph</p>

see how simple your code could be

neyet · 12-28-2014, 03:03 PM

Quote:

Originally Posted by Wendy Wolfe

2) Have you considered using Calibre or Sigil to edit the ebook rather than a simple text-editor? (They give you full control over the html.) The upside is that with the tools: dealing with the spine, toc.ncx, and inline TOC is much easier. And the debug tool is very handy.

Do you mean that it is preferable for me to convert my text-only document to an EPUB ebook using Calibre or Sigil and then edit it using the same tool?

Quote:

Originally Posted by Wendy Wolfe

3) CSS3 is a superset of CSS2. What CSS3 features are you considering (and have you checked that ereaders support it)?

I am considering to embed audio.

Is there a list of ereaders that support CSS3 features?

neyet · 12-28-2014, 03:04 PM

Quote:

Originally Posted by odedta

If you're using any sort of media query via CSS3 make sure it's in a separate CSS file.

What is media query?

odedta · 12-30-2014, 12:24 PM

It's a way of telling the reading device to load a CSS file based on the screen size or orientation

Here is a good article to explain further into the subject: http://epubsecrets.com/media-queries-in-epubs.php
Here is an example of a book using media queries:
https://code.google.com/p/epub-sampl....epub&can=2&q=

Why would you want to move those to a separate file? some ebooks readers does not have support for these queries and disregard the entire file because of that, you don't want all your eBook CSS disregarded because of one media query the device doesn't like.

JSWolf · 01-02-2015, 09:59 PM

ADE 2 and ADE 3 do not work with media queries. I cannot speak about ADE 4 as I've never installed it.

Hitch · 01-03-2015, 06:25 PM

Quote:

Originally Posted by neyet

What is media query?

neyet:

Don't take this the wrong way, but you're not remotely close to the media-query stage yet. That's a bit more advanced in terms of understanding ePUBs, how they work across devices, etc. At the stage you're at, you really ought to be taking HTML and CSS classes or tutorials (so you would know how to link an ePUB document with a CSS sheet, for example), and worry about the more-advanced things like media-queries later. Ditto embedding audio--really, that's something that you learn to do later, after you've learnt to make a clean, functioning ePUB file.

(n.b.: 99.99% of all ePUB readers won't play any embedded audio.)

And, guys:

Really, we should be linking him to Pablo's Tutorial. Here, neyet--this will get you started: https://wiki.mobileread.com/wiki/EPub_Tutorial

Hitch

12-28-2014, 04:14 AM	#1
neyet Member Posts: 14 Karma: 10 Join Date: Dec 2014 Device: none	Which one to apply: HTML tagging or CSS stylesheets? When composing a text-only ebook using a simple text editor, do you apply HTML tagging or CSS stylesheets throughout?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Custom CSS Stylesheets for Calibre's Viewer	Ralob	Viewer	389	11-24-2024 11:10 AM
Is it possible to apply CSS to Sigil generated TOC?	carogray	Sigil	20	10-28-2013 11:11 AM
html css question	holdit	Sigil	3	12-17-2012 11:55 AM
CSS: Styles for <cite> won't apply	kevlin	Sigil	4	01-11-2012 12:29 PM
eReader apps that do use embedded CSS 'stylesheets'	jttraverse	Android Devices	7	05-20-2011 12:28 AM

12-28-2014, 04:49 AM	#2
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	Stylesheets all the way.

12-28-2014, 09:10 AM	#4
Wendy Wolfe Member Posts: 11 Karma: 10 Join Date: Sep 2014 Device: Kindle DX, Kindle Fire HDX 7", iOS (iPhone and iPad)	A few thoughts: 1) The stylesheet is linked to the html files in the <head> section <head> .... <link href="../../styles/default.css" rel="stylesheet" type="text/css"/> </head> 2) Have you considered using Calibre or Sigil to edit the ebook rather than a simple text-editor? (They give you full control over the html.) The upside is that with the tools: dealing with the spine, toc.ncx, and inline TOC is much easier. And the debug tool is very handy. 3) CSS3 is a superset of CSS2. What CSS3 features are you considering (and have you checked that ereaders support it)?

12-28-2014, 09:29 AM	#5
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	I would strongly recommend an editor like Sigil. Also, keep it on CSS2 (and ePUB2) for better compatibility. Keep in mind that it is strongly recommended to keep the XHTML file below 280k. Especially older readers have a limit there. Rule of thumb is a XHTML file per chapter. With a stylesheet you have much, much better control.

12-28-2014, 10:27 AM	#7
odedta Addict Posts: 398 Karma: 96448 Join Date: Dec 2013 Device: iPad	If you're using any sort of media query via CSS3 make sure it's in a separate CSS file.

12-30-2014, 12:24 PM	#11
odedta Addict Posts: 398 Karma: 96448 Join Date: Dec 2013 Device: iPad	It's a way of telling the reading device to load a CSS file based on the screen size or orientation Here is a good article to explain further into the subject: http://epubsecrets.com/media-queries-in-epubs.php Here is an example of a book using media queries: https://code.google.com/p/epub-sampl....epub&can=2&q= Why would you want to move those to a separate file? some ebooks readers does not have support for these queries and disregard the entire file because of that, you don't want all your eBook CSS disregarded because of one media query the device doesn't like.

01-02-2015, 09:59 PM	#12
JSWolf Resident Curmudgeon Posts: 79,665 Karma: 145864619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	ADE 2 and ADE 3 do not work with media queries. I cannot speak about ADE 4 as I've never installed it.

Advert

Advert