This is a short video I made where I attempt to show why eBooks are reflowable and do not have any real page numbers. This is a very confusing subject to people, especially authors who don't own an eReader and yet want to publish their books as eBooks. (ALL authors should own at least one Kindle and one Nook and / or Kobo.)
Showing posts with label eBooks. Show all posts
Showing posts with label eBooks. Show all posts
Monday, January 4, 2016
Monday, October 8, 2012
A Crash Course In CSS
I'm posting this for people who are trying to format their own eBooks. I have a business formatting eBooks (see ths sidebar for a link to my business pages), but I like to try and help people do it themselves too.
Of all the books and online articles written about CSS, I've yet to see a single one that addressed the basics in a way that would answer all your questions quickly and easily. I'm going to attempt to do that here though for those who want to learn it. I still have plenty to learn (there's ALWAYS more to learn!), and so will you, but this is the foundation of CSS.
Cascading Style Sheets control the placement and look of elements on HTML pages and give you more control than HTML tags themselves do. The important things to remember are that they're called cascading for a reason. You can use an EXTERNAL style sheet, you can use INTERNAL styles in the head, or INLINE styles directly within a paragraph or other page element. (Just remember not to try to use them in tables for the most part.) An internal style will override the external style sheet. And an inline style will override both the internal and external styles, thus the term "cascading."
With external style sheets you merely write the styles down anywhere in the sheet and then link to that sheet from the HTML page(s). With internal styles you write them in the <head>Styles here.</head> Then you apply those styles to a page element such as a paragraph usually using a CLASS. So you might have a style listed in the head like this:
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="en-us" http-equiv="Content-Language" />
<title>Ebook Pioneers</title>
<style type="text/css">
H1 { font-size: x-large; color: red }
</style>
</head>
Now let's look at that style closer:
<style type="text/css">
H1 { font-size: x-large; color: red }
</style>
The style TYPE is always the same: <style type="text/css">. It would appear that when CSS was first being developed, room was left for the development of other types, but as far as I know, "text/css" is still the only type that's ever been used in CSS.
H1 is HTML code for a Heading 1 style which is quite large lettering. That H1 is called a SELECTOR. It's telling us the element on the page that the style is being applied to; in this case it's any Heading 1 elements that are on the page.
Font-size and color are both PROPERTIES of the Heading 1.
X-large and red are VALUES asigned to the properties.
Then we always finish with a slash before "style" to END the style:
</style>
Now there's only one style there, but we could place as many stles as we needed between <style type="text/css"> and </style>. For instance:
<style type="text/css">
p {
margin-top: 0.0em;
margin-bottom: 0.0em;
text-indent:1.5em
}
p.breakhere {
page-break-before: always
}
</style>
The capital "P" here all by itself indicates a paragraph selector for ALL paragraphs, so our style is going to be applied to each and every pargraph. Every paragraph on the page will have a zero margin before it and after it, meaning that there will be no blank lines between any of the paragraphs. And each paragraph will have an indent of 1.5em. (An "em" is a unit of measure representing the size of a typical capital letter in the paragraph.)
p.breakhere you'll notice uses a small "p" followed by a period and "breakhere". This is a style that will be used on various paragraphs that we choose rather than to ALL of them. The "p" again indicates "paragraph" and the ".breakhere" is called a CLASS. In order for this style to take effect on any of the paragraphs you would need to go to a paragraph where you want to use that style (in this case a pagebreak so eReaders will know to start a new page on that paragraph). A paragraph normally starts with a p tag: <p>. We'll place our paragraph class inside that tag like this:
<p class="breakhere">Text goes here.</p>
Now, instead of placing styles in the <head> you can also place them directly witin a page element. This is called an "inline style." For example:
<p style="margin: 2em 2em;">Text here.</p>
There I'm telling that paragraph (and only that paragraph) to place the equivalent of two blank lines on each side of it. If you only have a few of paragraphs that need a style that's different from the others, then applying an inline style is often the best way to go.
You can mix an inline style with an internal or external style (class) too like this (for example):
<p class="breakhere" style="margin: 2em 2em;">Text here.</p>
So there we have a CLASS that came from a style placed in the <head> and we've added an inline style for the margins of this paragraph as well.
But remember this: You CAN'T group classes in mobi 7 books. The first two generations of Kindle eReaders don't recognize CSS formatting, so KindleGen and other mobi converters convert CSS styles to HTML equivalents for them, but they will NOT properly render the styles as HTML for those older eReaders if you try to have more than one CSS class in an element. So you can have an inline style mixed with one internal class, but no more than that. You couldn't apply one class for text color and another for text size. But you CAN have as many properties/values as you want (for the most part) within ONE style whether it's internal, external, or inline. For instance, you could have a style declaration that addresses font color, size, type, indent etc. all with a single style. In the following I have one inline style consisting of one property (text) but with two values (indent and margin) separated by a semicolon. I could have as many properties and values as I wanted in this one style:
<p style="text-indent: 0em; margin: 0em 0em 1em 0em;">Text here.</p>
So I couldn't write "style" (indicating an inline style) a second time in that paragraph opening tag, nor could I write "class" twice to declare yet another style. I could, however, apply a second style from the head or an external sheet as a CLASS.
I can do this (a style and a class):
<p class="blockquote" style="margin: 2em 2em;">Text here.</p>
But not this:
<p style="blockquote" style="margin: 2em 2em;">Text here.</p>
Or this:
<p class="blockquote" class="margin: 2em 2em;">Text here.</p>
Lastly, if you want to apply a style to just a few words in a paragraph (or even just one letter), then you would use a "span." Here we'll just make the word "Spain" have a red font color:
<p>The rain in <span style="color:red">Spain</span> falls mainly on the plain.</p>
Remember to look at Amazon's guide to see which styles will and won't work. And they will degrade nicely to HTML entities for Kindle 1 and Kindle 2 eReaders.
This post just gives the basics of how CSS works. You'll never remember all the hundreds of styles available for web page elements, so it's good to invest in a good reference book. I highly recommend:
O'Reilly's Head First HTML With CSS & XHTML
Of all the books and online articles written about CSS, I've yet to see a single one that addressed the basics in a way that would answer all your questions quickly and easily. I'm going to attempt to do that here though for those who want to learn it. I still have plenty to learn (there's ALWAYS more to learn!), and so will you, but this is the foundation of CSS.
Cascading Style Sheets control the placement and look of elements on HTML pages and give you more control than HTML tags themselves do. The important things to remember are that they're called cascading for a reason. You can use an EXTERNAL style sheet, you can use INTERNAL styles in the head, or INLINE styles directly within a paragraph or other page element. (Just remember not to try to use them in tables for the most part.) An internal style will override the external style sheet. And an inline style will override both the internal and external styles, thus the term "cascading."
With external style sheets you merely write the styles down anywhere in the sheet and then link to that sheet from the HTML page(s). With internal styles you write them in the <head>Styles here.</head> Then you apply those styles to a page element such as a paragraph usually using a CLASS. So you might have a style listed in the head like this:
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="en-us" http-equiv="Content-Language" />
<title>Ebook Pioneers</title>
<style type="text/css">
H1 { font-size: x-large; color: red }
</style>
</head>
Now let's look at that style closer:
<style type="text/css">
H1 { font-size: x-large; color: red }
</style>
The style TYPE is always the same: <style type="text/css">. It would appear that when CSS was first being developed, room was left for the development of other types, but as far as I know, "text/css" is still the only type that's ever been used in CSS.
H1 is HTML code for a Heading 1 style which is quite large lettering. That H1 is called a SELECTOR. It's telling us the element on the page that the style is being applied to; in this case it's any Heading 1 elements that are on the page.
Font-size and color are both PROPERTIES of the Heading 1.
X-large and red are VALUES asigned to the properties.
Then we always finish with a slash before "style" to END the style:
</style>
Now there's only one style there, but we could place as many stles as we needed between <style type="text/css"> and </style>. For instance:
<style type="text/css">
p {
margin-top: 0.0em;
margin-bottom: 0.0em;
text-indent:1.5em
}
p.breakhere {
page-break-before: always
}
</style>
The capital "P" here all by itself indicates a paragraph selector for ALL paragraphs, so our style is going to be applied to each and every pargraph. Every paragraph on the page will have a zero margin before it and after it, meaning that there will be no blank lines between any of the paragraphs. And each paragraph will have an indent of 1.5em. (An "em" is a unit of measure representing the size of a typical capital letter in the paragraph.)
p.breakhere you'll notice uses a small "p" followed by a period and "breakhere". This is a style that will be used on various paragraphs that we choose rather than to ALL of them. The "p" again indicates "paragraph" and the ".breakhere" is called a CLASS. In order for this style to take effect on any of the paragraphs you would need to go to a paragraph where you want to use that style (in this case a pagebreak so eReaders will know to start a new page on that paragraph). A paragraph normally starts with a p tag: <p>. We'll place our paragraph class inside that tag like this:
<p class="breakhere">Text goes here.</p>
Now, instead of placing styles in the <head> you can also place them directly witin a page element. This is called an "inline style." For example:
<p style="margin: 2em 2em;">Text here.</p>
There I'm telling that paragraph (and only that paragraph) to place the equivalent of two blank lines on each side of it. If you only have a few of paragraphs that need a style that's different from the others, then applying an inline style is often the best way to go.
You can mix an inline style with an internal or external style (class) too like this (for example):
<p class="breakhere" style="margin: 2em 2em;">Text here.</p>
So there we have a CLASS that came from a style placed in the <head> and we've added an inline style for the margins of this paragraph as well.
But remember this: You CAN'T group classes in mobi 7 books. The first two generations of Kindle eReaders don't recognize CSS formatting, so KindleGen and other mobi converters convert CSS styles to HTML equivalents for them, but they will NOT properly render the styles as HTML for those older eReaders if you try to have more than one CSS class in an element. So you can have an inline style mixed with one internal class, but no more than that. You couldn't apply one class for text color and another for text size. But you CAN have as many properties/values as you want (for the most part) within ONE style whether it's internal, external, or inline. For instance, you could have a style declaration that addresses font color, size, type, indent etc. all with a single style. In the following I have one inline style consisting of one property (text) but with two values (indent and margin) separated by a semicolon. I could have as many properties and values as I wanted in this one style:
<p style="text-indent: 0em; margin: 0em 0em 1em 0em;">Text here.</p>
So I couldn't write "style" (indicating an inline style) a second time in that paragraph opening tag, nor could I write "class" twice to declare yet another style. I could, however, apply a second style from the head or an external sheet as a CLASS.
I can do this (a style and a class):
<p class="blockquote" style="margin: 2em 2em;">Text here.</p>
But not this:
<p style="blockquote" style="margin: 2em 2em;">Text here.</p>
Or this:
<p class="blockquote" class="margin: 2em 2em;">Text here.</p>
Lastly, if you want to apply a style to just a few words in a paragraph (or even just one letter), then you would use a "span." Here we'll just make the word "Spain" have a red font color:
<p>The rain in <span style="color:red">Spain</span> falls mainly on the plain.</p>
Remember to look at Amazon's guide to see which styles will and won't work. And they will degrade nicely to HTML entities for Kindle 1 and Kindle 2 eReaders.
This post just gives the basics of how CSS works. You'll never remember all the hundreds of styles available for web page elements, so it's good to invest in a good reference book. I highly recommend:
O'Reilly's Head First HTML With CSS & XHTML
Subscribe to:
Posts (Atom)