HTML and CSS Cheat Sheet

Here’s an HTML and CSS cheat sheet for formatting Kindle books. You could use this info together with info from my (old but still useful) book How to Convert Your Book to Kindle: Simple Steps for Non-Programmers, to help troubleshoot your Kindle conversion efforts. (Cover design by my daughter Molly Michelle Smith.)

HTML and CSS Cheat Sheet for Formatting Kindle Books
Formatting with HTML Occurs in document at spot formatting is needed. Usually affected text is surrounded by begin and end tags < > and </>.
<big>Wow!</big>
Formatting with CSS Using “internal” CSS stylesheet (shown in this book), create style definitions (to apply to elements or spans) between <style> and </style> tags in .html document <head> section. Can specify style classes in stylesheet and then “call” for them in document at spot where formatting is needed.
p.alert {color: red;}
<p class=”alert”>I want everything in this paragraph to be red.</p>“Inline” CSS style characteristic(s) can be specified on a one-by-one basis in the text, without having to create a style definition in your document <head>. For instance, maybe you want just one or a few paragraphs in your book right-aligned. You could specify the alignment, using CSS attributes, inside HTML tags around the relevant paragraphs.
<p style=”text-align:right”>I want this paragraph to be right-aligned.</p>

 

Page breaks <mbp:pagebreak /> (special Kindle code)
Paragraphs HTML <p>text</p>
<p align=”justify”>I want this paragraph justified.</p>
Paragraphs CSS You can create style definitions to format paragraphs.

p.sans-serif {color: blue; font-size: 14px; text-align: center; font-family: Arial;}
<p class=”sans-serif”>This paragraph will be blue text, 14 pixels, centered, Arial.</p>

Line breaks To be used sparingly for special occasions, such as to break lines of poetry.
<br />

 

Headings and subheadings HTML <h1>The Pacific Northwest</h1>
<h2>The Oregon Coast</h2>
Headings and subheadings CSS Style definitions can be used to format headings and subheadings.

h1 {color: orange;}
<h1>This heading will show up orange in my book.</h1>

 

Bold HTML <strong>text</strong>
Bold CSS Can be specified in a style definition:

h1 {font-weight: bold;}
Makes all 1st-level headings bold.

Italic HTML <em>text</em>
Italic CSS Can be specified in a style definition:
h2 {font-style: italic;}
Makes all 2nd-level headings italic.

 

Center (horizontally) HTML <div align=”center”>text</div>
OR
<p align=”center”>text</p>Or instead of text, you can center an image:
<p align=”center”><img src=”imagename.gif”></p>
Center (horizontally) CSS Can be specified in a style definition:

p {text-align: center;}
Centers the contents of all paragraphs that are surrounded by <p> and </p> (which would be all your default paragraphs, i.e., most your book). Amazon will override this.

To center only some paragraphs:
p.centered {text-align: center;}
Centers the contents of all paragraphs that are surrounded by <p class=”centered”> and </p>.

To center all images:
img {display: block;
margin-left: auto;
margin-right: auto;}

To center only some images:
img.centered {display: block;
margin-left: auto;
margin-right: auto;}

Then, in your document, for the images you want centered:
<img class=”centered” src=”nameofyourgraphic.jpg” />

 

Bold, italic, and centered HTML <p align=”center”><strong><em>text</em></strong></p>
OR
<div align=”center”><strong><em>text</em></strong></div>
OR
<h1 align=”center”><em>text</em></h1>
Bold, italic, and centered CSS Can be specified in a style definition:

h3
{text-align: center;
font-weight: bold;
font-style: italic;}

Makes all 3rd-level headings centered, bold, and italic.

 

Symbols For instance, &copy; to get ©, &#233; to get é. See webmonkey for list.
Subscripts and superscripts <sub>text</sub>
<sup>text</sup>

 

Bulleted lists <ul> <li>text</li> </ul>
Numbered lists <ol> <li>text</li> </ol>
Tables <table> <tr> <td>text</td> </tr> </table>

 

Links <a href=”http://www.spot.com”> text</a>

Link to spot within same document:
<a href=”#george”>click here to go to George</a>

Anchors <a name=”george”>George</a>
Footnotes At the footnote location in the text:
<a href=”#fn1″ name=”fnref1″><sup>1</sup></a>At the location of the footnote contents:
<a href=”#fnref1″ name=”fn1″>1</a> K.D. Kirby and C.J. Mardon, “Solid Phase Fermentation”.

 

Insert graphics <img src=”imagename.jpg” />

 

Indented text blocks HTML <blockquote>text</blockquote>
Indented text blocks CSS Style definitions can be used to format the <blockquote> tag:
blockquote {margin-left: auto;
margin-right: auto;
width: 6em;}
Then, in your document, for the text blocks you want indented:
<blockquote>This paragraph will be a centered block of text (individual lines will not be centered), 6 ems (96 pixels) wide.</p>You can also define and apply a class for special indents for specific blocks of text:
p.quotation {padding-left: 10%;
display: block; color: blue;}

Then, in your document, for the text blocks you want indented:
<p class=”quotation”>This paragraph will be a block of text indented 20px from the left margin.</p>

Indented first lines of paragraphs CSS Can be specified in a style definition:
p {text-indent: 15%;}
For all paragraphs (unless overridden by another style), indents first line.p {text-indent: 0;}
For all paragraphs (unless overridden by another style), no first-line indent.
Odd indentations HTML &nbsp;
Inserts a nonbreaking space.

 

Different font faces HTML <font face=”helvetica”>text</font>
Different font faces CSS Can be specified inline:
<p style=”font-family: verdana”>I want this paragraph to be in Verdana.</p>Can be specified in a style definition:p.sans {font-family: Verdana, Geneva, sans-serif;}

For all paragraphs that are surrounded by <p class=”sans”> and </p>, makes text Verdana; if that’s not available makes text Geneva; if that’s not available, makes text any sans-serif font.

.sans {font-family: “Times New Roman”, Times, serif;}

For all text that is surrounded by <span class=”sans”> and </span>, makes text Times New Roman; if that’s not available makes text Times; if that’s not available, makes text any serif font.

 

Different font sizes HTML <small>text</small>
<big>text</big>
<big><big>text</big></big>
<font size=”140%”>text</font>
<font size=”2em”>text</font>
<font size=”32px”>text</font>
Different font sizes CSS Can be specified inline:
<p style=”font-size:20px”>I want this paragraph to be in type that’s 20 pixels high.</p>Can be specified in a style definition:
p.mysmalltype {font-size: .8em;}
For all paragraphs that are surrounded by <p class=”mysmalltype”> and </p>, makes font size .8 em (1 em is 16 pixels)..ridiculouslybig {font-size: 300%;}
For all text that is surrounded by <span class=”ridiculouslybig”> and </span>, makes text 300% size of main font.

 

Colored text HTML <font color=”red”>text</font>
<font color=”#ff0000″>text</font>
Colored text CSS Can be specified inline:
<p style=”color: purple”>I want the text in this paragraph to be purple.</p>Can be specified in a style definition:.green {color: green;}
For all text that is surrounded by <span class=”green”> and </span>, makes text green.

 

Styles with multiple specifications CSS Can be specified in a style definition:
.style1 {text-align: center;
font-size: 200%;
font-weight: bold;
font-style: italic;
color: orange;}

Applies specified formatting to all text surrounded by <span class=”style1″> and </span>.
Drop caps CSS Can be specified in a style definition:
span.dropcaps {float: left; font-size: 3em; margin-bottom: -0.3em; margin-top: -0.3em;}Creates drop cap from text character surrounded by <span class=”dropcaps”> and </span>.

For more information on how to convert your book to Kindle using simple HTML, see my book Control Your Kindle Book Formatting: Simple Step-by-Step Instructions.