stylesheet.CSS anyone?

[ProDigit]

Ok,
Great strides have been made on my first EPuB book.
Just 4 days ago, I knew only how to do basic programming in HTML0, and now I'm processing an EPuB file.


So far, I've managed to learn, understand, and create my own:

mimetype file,
META-INF\container.xml file,
OEBPS\content.opf file,
OEBPS\Text\*.html files (my book files)
OEBPS\IMG\*.jpg files (my illustrations and images)

The last two are still in the making, but are not hard to due to past experience...

I think I will understand toc.xml just fine, with a little more research,
The Wiki has been a great help, as well as seeing other published books, and comparing them to my own creation.

But I don't get the stylesheet.CSS file at all yet.

It appears different from HTML and XML programming.

Is stylesheet.css absolutely necessary?

Like, it appears to me to be a document describing margins, fonts and sizes, and more other primary data for the garbage collection.
If I would remove the file from an ebook, would it default to some default setting somehow?

I understand that a stylesheet.css could make an ebook appear unique, and allows it to stand out from other ebooks,
but what if I'm perfectly happy with the fonts available in most ebook readers?

Tell me if I'm not getting something!

[Jellby]

No, CSS files are not compulsory. You can have XHTML without any styling, and the reader will apply some default one. But you shouldn't rely on any default, it could be "everything looks the same" (and that includes, headings, italics, etc.).

[doubleshuffle]

Originally Posted by Jellby

No, CSS files are not compulsory. You can have XHTML without any styling, and the reader will apply some default one. But you shouldn't rely on any default, it could be "everything looks the same" (and that includes, headings, italics, etc.).

And it will most definitely be "everything looks quite ugly."

[JSWolf]

Originally Posted by doubleshuffle

And it will most definitely be "everything looks quite ugly."

Nah! It won't look that good.

[Notjohn]

>Tell me if I'm not getting something!

You're not getting something!

Everything we write is formatted (badly, very often). The stylesheet (it doesn't have to be named stylesheet -- you have can several stylesheets if you write/publish books in different styles.)

I have been slow to move away from inline styles, because I began writing web pages in 1992 or 1993, just making it up as I went along. I don't think anyone used stylesheets twenty years ago. A stylesheet makes life easier, that's all. I now have a couple or three for my websites (some are mobile-friendly; the old ones are not) and another, called epub.css, for my books. You can see (and borrow, if you like) the last on my blog at notjohnkdp.blogspot.com

[ProDigit]

I presume without stylesheet, you can still select between heading <h1> to <h4> or so, and between <b>, <i> and <u>,
And presume that you can write the book in one font specified at the top of the html, right?

I still need to learn how the .css file connects to xml and html, probably my next project. Html without this was so much easier!

[JSWolf]

Originally Posted by ProDigit

I presume without stylesheet, you can still select between heading <h1> to <h4> or so, and between <b>, <i> and <u>,
And presume that you can write the book in one font specified at the top of the html, right?

I still need to learn how the .css file connects to xml and html, probably my next project. Html without this was so much easier!

You can put in <h1> to <h4> and <b>, & <i>. I'm not sure about <u>. You might need to do underlining via CSS.

CSS allows you do define how the ePub looks. You cannot do some things without CSS like embed fonts, smallcaps (even if simulated), and other things. Also, you make it hard to edit it just for yourself.

[Turtle91]

The main idea to keep in mind is that any tags you use in your html file should be structural in nature: <h1-6> for headers, <p> for paragraphs, <div> for non-paragraphs or other structural divisions, <blockquote> around block quotes, and <em> or <strong> to identify words or phrases that should be emphasized or prominent. Keep 99.99% all styling in your style sheet.

Devices/apps usually have a default styling, but as mentioned above, it will not look good. You should always tell the device how you want the book to look - even if some devices ignore your wishes.

The way you tell it how you want it to look is using the css stylesheet. You link the stylesheet to your html file by including:

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

in the head of the html file...just replace "../Styles/styles.css" with the path and file name of your css file.

Here is a great resource to help teach yourself (or just reference) all the things you can do with CSS: W3Schools

Cheers,

[Notjohn]

Originally Posted by JSWolf

You can put in <h1> to <h4> and <b>, & <i>. I'm not sure about <u>. You might need to do underlining via CSS.

I found that to be the case, and I wound up with the following style in my css:

span.underline {
text-decoration:underline;
}

I don't remember adding it, but I must have done (perhaps with advice received on MB forums) because it's not Sigil-created as sometimes happens.

[pdurrant]

Originally Posted by ProDigit

I still need to learn how the .css file connects to xml and html, probably my next project. Html without this was so much easier!

CSS connects to HTML via tags and classes and ids, and lots of other ways. See CSS Selectors.

e.g.

body {
   font-family: "Times New Roman:, Times, serif;
}

will apply Times New Roman, or Times, or a serif font to the body of the HTML.

p {
   text-indent: 1em;
}

will indent the first line of all paragraphs by 1em.

p.first {
   text-indent: 0em;
}

will set the indent of any paragraph of class first to zero. So that

<p class="first">In a hole in the ground there lived a hobbit.</p>

won't have an indent.

[JSWolf]

Originally Posted by pdurrant

p.first {
   text-indent: 0em;
}

That sort f thing bugs me as it's useless code bloat. Get rid of em and p.

.first {
text-indent: 0;
}

That's better. Keep it minimalist and that is minimalist.

[Turtle91]

Unless, of course, they wanted to differentiate between a p.first and a div.first or somesuch...

You are absolutely correct that you shouldn't need to put units on a value of zero...zero anything is zero - and devices/apps (all of them??) know that.

I would also remove the extra white space and the trailing semi-colon to be ocd-minimalist:

.first{text-indent:0}

[JSWolf]

Originally Posted by Turtle91

Unless, of course, they wanted to differentiate between a p.first and a div.first or somesuch...

You are absolutely correct that you shouldn't need to put units on a value of zero...zero anything is zero - and devices/apps (all of them??) know that.

I would also remove the extra white space and the trailing semi-colon to be ocd-minimalist:

.first{text-indent:0}

I did leave in the semi-colon. Thanks for catching that.

[pdurrant]

Originally Posted by JSWolf

That sort f thing bugs me as it's useless code bloat. Get rid of em and p.

You can't get rid of the p without changing the meaning. You can discard the em, which works great until you copy/paste this and want to change the zero to something else.

The two bytes saved in the size of the CSS stylesheet are completely insignificant.

The loss of utility is significant.

Do not over-optimise.


Your comment was also completely off-topic and irrelevant. ProDigit is asking about how and why to use CSS, not how best to optimise it down to the last byte. Sheesh.

[ProDigit]

So, if you have absolutely nothing to add in a css, what would you say, would be the utter minimum that a css file should exist out of?
Can you leave a css fine empty (zero bytes)?